COMPONENTS / CARD MODULE

Card

Bordered content module: eyebrow, title, body, meta row. Raised surface on a hairline — never a shadow. When the whole card is one destination, the card itself is the link and the border answers on hover.

VERSION1.0.0

TOKENS9 CONSUMED

CONTRASTAA / AAA

DEPENDENCIESNONE

01 / LIVE INSTANCES — ALL STATES

HOVER / FOCUS FORCED FOR SPECIMEN

STATIC — NOT A LINK

THM-01 / THEME

Paper

Warm paper neutrals with one orange accent. The founding skin — ships with every component documented.

TOKENS.CSS · 41 LINES$39

LINK — DEFAULT

THM-02 / THEME

Ink

Cold steel neutrals, dark-first. Same components, different temperature.

TOKENS.CSS · 41 LINES$39

LINK — HOVER (FORCED)

THM-03 / THEME

Terminal

Green on near-black, mono-heavy. For people who miss their shell.

TOKENS.CSS · 41 LINES$39

FOCUS-VISIBLE: GLOBAL RING ON THE CARD LINK. DISABLED / LOADING: N/A — RENDER SKELETON (QUEUED) OR OMIT THE CARD. EMPTY: THE GRID PARENT OWNS THE EMPTY STATE, NOT THE CARD.

02 / ANATOMY — EXPLODED VIEW

01 FRAME
--hair · --r1 · --bg-raised · PADDING --s6

THM-01 / THEME

02 EYEBROW
--font-mono · --t1 · --fg-faint

03 TITLE
--font-ui · --t3 · 600

Paper

Body copy, two lines maximum.

04 BODY
--t2 · --fg-muted · CLAMP AT TWO LINES

05 META ROW
--font-mono · --t1 · SPACE-BETWEEN

TOKENS.CSS · 41 LINES $39

FIG. C-01 — VERTICAL RHYTHM: EYEBROW --s3, TITLE --s2, META TOP --s4.

03 / TOKENS CONSUMED

PROPERTYTOKENVALUE

SURFACE--bg-raisedRAISED

BORDER--hair1PX --line

BORDER / HOVER--fgINK

TITLE / HOVER--accent#EF4E0B

PADDING--s624PX

RADIUS--r12PX

EYEBROW / META--font-mono / --t1--fg-faint

TITLE--t3 / 60016PX

BODY--t2 / --fg-muted14PX

04 / CODE — COPY-READY

<a class="card" href="/themes/paper">
  <div class="card__eyebrow">THM-01 / THEME</div>
  <h3 class="card__title">Paper</h3>
  <p class="card__body">
    Warm paper neutrals with one orange accent.
  </p>
  <div class="card__meta">
    <span>TOKENS.CSS · 41 LINES</span>
    <span>$39</span>
  </div>
</a>

<!-- static: same markup on a <div> -->

/* CSS — components.css / CARD */

05 / RESPONSIVE BEHAVIOUR

≥1024GRID 3-UP IN A 12-COL LAYOUT, GAP --s6.

640–10232-UP.

<6401-UP, FULL WIDTH. PADDING DROPS TO --s4.

06 / ACCESSIBILITY

ELEMENT<A> WHEN ONE DESTINATION; <DIV>/<ARTICLE> WHEN STATIC. NEVER NEST INTERACTIVES INSIDE A CARD LINK.

ARIANONE — TITLE IS A REAL HEADING IN OUTLINE ORDER.

FOCUSGLOBAL RING AROUND THE WHOLE CARD.

CONTRASTTITLE 18.2:1 AAA · BODY 5.2:1 AA · EYEBROW/META 3.2:1 — METADATA, NEVER SOLE CARRIER.