Field notes
When the card is the story
One idea, a short proof, and a single next step. Default padding and shadow separate this block from the page.
Cards & horizontal swipers
Cards bundle one idea: a title, proof, and optional action. Swipers (horizontal snap rows) are for peer content where each slide is whole — issues, episodes, comparable tiers — not for stacking unrelated widgets.
Base card (.sermona-card)
Default: elevated surface, hairline border, card shadow, generous padding.
| Modifier | Use |
|---|---|
.sermona-card--flat | Quiet cards on already-elevated bands; removes shadow. |
.sermona-card--dense | Tighter padding in dense dashboards or nested layouts. |
.sermona-card--stack | Flex column + gap; pair with .sermona-card__footer and margin-top: auto on the footer for pinned footers (e.g. CTA at bottom). |
.sermona-card--interactive | Hover lift + border brightening; use on <a> for whole-card links — add focus-visible outline (included for a.sermona-card). |
Core to card (exemplified)
A card is one subject with a scannable spine: label → value, then proof or action. Editorial cards breathe; dashboard / ops cards tighten padding (--dense), often drop shadow (--flat) when they sit on an already-elevated band, and lean on caption/meta plus tabular numerals for variable data (amounts, IDs, dates). Prefer .sermona-data-pair stacks or key–value panels over long paragraphs; use em dash or muted copy for missing fields so length doesn’t jump.
Accommodations at a glance
| Need | Lever |
|---|---|
| Tighter vertical rhythm | --dense, smaller gaps on inner stacks (gap: var(--sermona-space-2)) |
| Wall of metrics on a band | --flat to avoid shadow noise |
| Label / value scan | .sermona-data-pair, .sermona-meta kicker, font-variant-numeric on values (pairs / .sermona-kv) |
| Optional / empty fields | Muted — or “Not set”, same line height as filled rows |
| Whole-card drill-down | --interactive; don’t bury competing links inside |
Editorial vs dense variable data (live)
Same chrome, different density — default padding and story-led copy vs --dense --flat and data pairs.
Shipment · SYD→MEL
Batch 2026-05-08441
SKU
SER-MTL-GLD-009
Units
1,024
ET warehouse
May 09 · 06:40
PO number
—
Last event · Customs hold · 2h ago · Operator N.D.
Overflowing or comparing many rows of variable data belongs in a table or dedicated admin pattern — keep the card as the summary surface.
Grid vs swiper
| Pattern | When |
|---|---|
.sermona-card-grid | Two or more cards that can wrap; same hierarchy; no strong “peek” of the next item. |
.sermona-swiper | Ordered deck (carousel of equals), mobile-first exploration, or full-bleed editorial rails where the next card should peek. |
.sermona-service-grid | Pricing / tier columns (already paired with .sermona-service-card). |
Avoid swipers for tabular or long-form content — use Data & tables or prose.
Card grid (demo)
Issue 04
Systems in the wild
How tokens stay honest when the product ships every week.
Workshop
Audit to library
A repeatable pass from Figma audit to published CSS.
Interactive
Whole-card affordance for drill-down (not nested links — one destination).
Horizontal swiper
Structure:
.sermona-swiper— optional.sermona-swiper--bleed(full viewport width inside a centered layout),.sermona-swiper--fade(right-edge gradient hint),.sermona-swiper--peek(narrower slides so the next card shows),.sermona-swiper--wide(wider default slide width).- Optional
.sermona-swiper__label— kicker-style row title. .sermona-swiper__track—tabindex="0"when it should be keyboard-scrollable; label witharia-labeloraria-labelledby..sermona-swiper__slide— one logical unit per slide (card, tile, or quote block).
On non–page backgrounds, set the fade to match the band, e.g. style="--sermona-swiper-fade-bg: var(--sermona-color-bg-elevated)" on .sermona-swiper.
Contained track (no bleed): three service-style slides with snap.
Full-bleed rail
Use .sermona-swiper--bleed when the section lives inside .sermona-layout (or any centered measure) but the scroll rail should run edge to edge. Keep tabindex + role="region" + visible or screen-reader title.
Service cards as links
<a class="sermona-service-card"> is supported: no underline, focus-visible ring, inherited text color. Don’t nest interactive elements that steal the same gesture (no button inside a card-link without tabindex="-1" / careful a11y).
Motion & accessibility
- Scroll snap is not disabled under
prefers-reduced-motion; only smooth scrolling is limited to users who allow motion. - Prefer visible focus on the track when it’s focusable.
- Don’t rely on the fade alone to imply “more” — peeks and partial slides do most of the work; fade is cosmetic.
- For carousels that auto-advance, provide pause and respect reduced motion (out of scope for this CSS-only primitive — use JS deliberately).
See also
- Components — class index
- Sections — bands and editorial rhythm
- Services & pricing — static service grids and CTAs
- Good digital design — density and clarity