Primitives & cards

Generic sidebar and content patterns extracted from the recurring shapes in the specimen / institution / collection detail pages. The .panel is the universal outer frame; five card-type modifiers specialise the inner layout. Row primitives (.stat-row, .fact-row) live inside cards; cross-cutting primitives (.section-label, .chip) are reused both inside cards and elsewhere.

.panel — generic card frame

Bordered, rounded, base-100 background. Every sidebar card and several main-column containers compose from this primitive.

An empty .panel — bordered, rounded, on cream background. No inner styling.

.panel universal outer frame

.section-label / .section-divider

Small-caps tracked label header. Two roles: card header (.section-label) or main-column divider with hairline rules each side (.section-divider).

As a card header

Used inside .panel + card-type combinations to introduce the card's content.

.section-label card-header default
As a main-column divider

Used in the main column to introduce a new section, with hairline rules on both sides.

.section-divider main-column divider with rules

.stat-row — horizontal stat row

A single horizontal label/value pair, baseline-aligned, with a hairline divider beneath. Inner contract: <dt> (label) + <dd> (value). Lives inside a <dl> inside a .stat-card.

In a stat-card (horizontal)
Specimens
2 847
<StatCard> horizontal <dt>+<dd> rows

.fact-row — stacked fact row

A vertically-stacked label / value / meta block. Inner contract: .field-label + .field-value + optional .field-meta. Lives inside a .fact-list-card.

In a fact-list-card (stacked)
Specimens
2 847
Across 4 collections
<FactListCard> stacked label/value/meta blocks

.stat-card — horizontal label/value pairs

Used by: "At a glance" stats on institution and collection pages.

At a glance
Collections
4 published
Specimens
4 295
Compound specimens
416
Curators
3
<StatCard> + <dl> + .stat-row(<dt> + <dd>)

.fact-list-card — stacked label/value blocks

Used by: Attribution sidebar (specimen), Contact & registry (institution), Curator & contact (collection).

Attribution
Holding institution
Naturhistorisches Museum Bern
Bern, Switzerland
Collection
Mineralogy collection
Contact
thomas.burri@nmbe.example
<FactListCard> + .fact-row(.field-label + .field-value + .field-meta?)

.citation-card — citation + copy action + PID + licence

Used by: Citation block on specimen and collection pages. Composes .prose + .action + optional .meta-block + .footer.

Suggested citation
Burri, T. (1987). Limestone with coral fossil. Naturhistorisches Museum Bern, specimen NMBE 1987.0342.
Persistent identifier: handle:geoda/specimen/xyz789
CC BY 4.0 · Attribution required: NMBE Bern
<CitationCard> + .prose + .action + .meta-block? + .footer?

.figure-card — media with caption and optional action

Used by: sidebar image on specimen detail page. Image renders at natural aspect ratio at the panel's full inner width (no square cropping). The outer is a <section> (not <figure>) so the semantic <figure> + <figcaption> pairing stays valid inside .media.

Limestone matrix with embedded coral fossil
Photograph 1 of 4 · NMBE Bern · CC BY 4.0
View 4 photos
<FigureCard> <section> + <figure>.media(img + figcaption) + .meta(.action-link)?