Utilities

Cross-cutting CSS utilities and helper classes that aren't tied to a single component: semantic status colours, link utilities, scientific-binomial typography, and the section-label header. Reuse these instead of writing one-off styles.

Status colors

Desaturated, museum-tone status palette. No candy red-greens. Every use of status colour also carries a text label or icon (WCAG 1.4.1 — never colour-only signalling). One set of status colours across geoda. Used by alerts, banners, badges, status dots in tables.

Info Success Warning Error

--color-{info|success|warning|error} desaturated, museum-tone pills

Published Needs review Withdrawn Unpublished

status dot 6px dot — typical use: leading cell in a table row

Link utilities

Two link styles for the two registers of geoda link. .prose-link is the default inline link in body prose — primary colour, underline-on-hover. .muted-link is for meta-line links (subtitle of a PageHero, audit-row author name) — muted by default, primary on hover. Pick by context, not by emphasis.

Part of the Mineralogische Sammlung NMSO at the Naturhistorisches Museum Bern.

.prose-link inline body-prose link

Last edited 2026-03-12 by Maria Bühler · View audit log

.muted-link meta-line link — muted by default

Typography utilities

Two small typography utilities for scientific content: .binomial for italicised genus/species names and .lang-tag for the visible language indicator on vocabulary fallbacks. .lang-tag pairs with the HTML lang attribute so assistive tech announces the language change as well.

The matrix contains Stylonema corallinum alongside several Halysites specimens.

.binomial italic scientific binomial

Lower Devonian(en) Helvetische Alpenformation(de) Stylonema corallinum(la)

.lang-tag HTML lang + visible tag for vocabulary fallback

Section labels

Small-caps tracked label header. Two roles: .section-label sits inside a card or sidebar block as a label; .section-divider sits in the main column as a typographic divider with hairline rules on each side.

As a card header

Used inside <Card> + card-type combinations to introduce the card's content. Typically rendered as a <span id> referenced by aria-labelledby.

.section-label inside a card or sidebar block

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