Data display

Components that present content: badges, cards, heroes, citations, stats, fact lists, figures, lists, and tables. Generic frames at the top; domain-flavoured specialisations beneath. None of these initiate actions — pair them with components from Actions when a CTA is needed.

Badge

Two generic badge primitives: Badge (status pill, with info, success, warning, error variants) and Chip (removable filter token). Status colours come from Utilities § Status colors.

flagged info published review withdrawn 3 parts
<Badge variant='...'> status pill
Region: Jura Period: Lower Devonian Type: Fossil
<Chip label='...' removeLabel='...'> removable filter chip

Domain badges

Bespoke specimen-domain badges live alongside the generic Badge family in atoms/. They share the same rounded-selector pill shape but use specimen-type colours (not status colours).

Fossil Mineral Rock Meteorite
<SpecimenTypeBadge> Fossil / Mineral / Rock / Meteorite
3 parts
<CompoundPartsBadge> overlay badge — bottom-right of SpecimenCard / ImageCard

Card

Universal bordered surface frame. Composes DaisyUI's card card-border bg-base-100 with overflow-clip. Every other card on this page (StatCard, FactListCard, FigureCard, LinkListCard, CitationCard) wraps this primitive.

An empty <Card> — bordered, rounded, on cream background. No inner styling.

<Card> universal outer frame

ImageCard

Generic image-or-typography card. Two costumes of one shape: an image-mode (square cover image + caption strip) and a typography-mode (large title text in the hero region + caption strip). Both modes share the caption strip so a grid mixing image and typography cards stays visually uniform.

<ImageCard> image mode
<ImageCard> typography mode (no imgSrc)

PageHero

Title + subtitle + summary block at the top of a detail page. size="lg" for public detail pages (3rem display title); size="md" for workspace pages (1.875rem title). Same shape, different density.

Limestone with Stylonema corallinum

Lower Devonian · Jura, Switzerland

Held at the Naturhistorisches Museum Bern · Catalog NMBE-1987-0345

<PageHero size="lg" /> public — specimen detail

Mineralogische Sammlung NMSO

Part of Naturhistorisches Museum Solothurn

2 847 specimens · last published 2026-03-15

<PageHero size="md" /> workspace — collection detail

CitationCard

Citation prose + copy button + persistent identifier + licence footer. Sidebar card on specimen and collection detail pages.

Suggested citation
Bühler, M. (2024). Stylonema corallinum, limestone matrix. Naturhistorisches Museum Bern. Catalog NMBE-1987-0345.
Persistent identifier: handle:geoda/specimen/abc123
CC BY 4.0 · Attribution required: Naturhistorisches Museum Bern
<CitationCard> sidebar — specimen detail

StatCard

Horizontal label / value pairs. "At a glance" sidebar block on institution and collection pages. Inner rows are <dt> + <dd> baseline-aligned with a hairline divider beneath.

At a glance
Collections
4 published
Specimens
4 295
Compound specimens
416
Curators
3
<StatCard> + <dl> + horizontal rows

FactListCard

Stacked label / value / meta blocks. 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> + stacked .field-label / .field-value / .field-meta

FigureCard

Media with caption and optional action link. Sidebar image on the specimen detail page. Image renders at natural aspect ratio at the panel's full inner width (no square cropping).

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)?

SelectableCard

Card-shaped link for picking one entry from a grid (institutions list, collections grid). The entire card is a link. Title is a prop; body is a slot. Hover softens the border and shifts the title to primary.

Naturhistorisches Museum Bern
Bern, Switzerland · Founded 1832

A working collection of Swiss geological and palaeontological specimens, with public exhibitions in the city centre.

5 collections 248 specimens
<SelectableCard> institution-style — title + meta + summary + stats

Table

Used for tabular data — Records grid, Inbox file table, Members table. We render a plain semantic <table> envelope; in production the Records grid is driven by Cinder (an Elixir table component for LiveView) but the visual envelope and row treatment stay constant. Status uses a dot in the leading cell — see Utilities § Status colors.

Cataloged ID Specimen Locality Updated
NMBE-1987-0345 Stylonema corallinum Jura, Switzerland 2026-03-12
NMBE-1987-0346 Halysites catenularius Graubünden, Switzerland 2026-03-11
NMBE-1987-0347 Limestone matrix Valais, Switzerland 2026-03-09
<table class='table'> DaisyUI table — status dot + cataloged ID + meta

List

DaisyUI's list primitive — vertical rows with a thumb / content / trailing layout. The ListRow pattern: 64px square thumb (image, or typography fallback for missing images), a content column with title + meta, and a trailing meta or action column. Used by ResultListRow on the discover surface and several workspace surfaces.

  • Stylonema corallinum
    Lower Devonian · Jura · NMBE-1987-0345
    3 parts
  • Halysites
    Halysites catenularius
    Silurian · Graubünden · NMBE-1987-0346
    —
ul.list .list-row three-column thumb / content / trailing layout