Design System / 07.6

Cards

Use a card when an image, file, service, or short block of content needs a clear boundary. Each variant states whether the whole surface is interactive.

Component reference

Editorial card

A story link with a documentary image, optional sequence and metadata, and a readable title. Interaction dims the image and tightens its crop by 1.5%; metadata stays at the 60% contrast floor. Neither hover treatment restores saturation. Reduced motion keeps the crop still.

Live specimen

Rendered output

Woman seated on the steps of a pale green garden shed

Field noteJan 2026Binding notes from the July edition 12

ProcessFeb 2026Three paper stocks under press light

API reference

Inputs, types, and behavior

Inputhref / title: Typestring; BehaviorRequired link destination and visible story title; an empty href still renders a native anchor.
InputimageSrc / imageAlt: Typestring; BehaviorImage source and alternative text. imageAlt defaults to an empty string for a decorative image.
Inputindex: Typenumber?; BehaviorFinite non-negative values are truncated and zero-padded; negative or non-finite values are omitted.
Inputmeta: Typestring[]?; BehaviorOptional readable metadata kept unchanged during interaction.
Inputhover: Type"dim" | "soft-dim"; Behaviordim steps the image to 30%; soft-dim steps to 60%.
InputclassName: Typestring?; BehaviorMerged last onto the root anchor.

tsx
<EditorialCard
  href="/journal/paper-tests"
  imageAlt="Printed sheets on a worktable"
  imageSrc="/images/paper-tests.jpg"
  index={1}
  meta={["Production notes", "2026"]}
  title="Three paper stocks under press light"
/>

Component reference

File card

A 44px-minimum attachment or destination row. Downloads use a tray arrow, internal links use a forward arrow, and case-insensitive HTTP URLs open in a new tab with an outward arrow and an assistive-text announcement. Only the filename and glyph dim; metadata remains readable.

Live specimen

Rendered output

documentary-source.jpgJPGSource image motion-reference-with-an-extra-long-filename.mp4MP4Motion service-notes.htmlInternal identity-reference.htmlExternal

API reference

Inputs, types, and behavior

Inputhref / name: Typestring; BehaviorRequired destination and filename. The name preserves case and truncates when space is constrained.
Inputmeta: Typestring[]?; BehaviorOptional type, size, date, or status entries; these never inherit hover opacity.
Inputdownload: Typeboolean | string?; BehaviorForwards the native attribute. false remains link mode; true or a filename selects download treatment.
InputclassName: Typestring?; BehaviorMerged last onto the root anchor.

Component reference

Link card

A navigable card for destinations that have no photograph. WhereEditorialCard requires an image and leads with the crop, this leads with the title. The whole surface is one link, so it takes no nested controls; hover and press dim the card and slide the decorative arrow, which holds still under reduced motion.

Live specimen

Rendered output

01Café identity studyStudyHospitalitySixteen calibration frames covering service, evidence, and the opening ritual.Component referenceCatalogEvery family, with live specimens and the inputs each component accepts.

API reference

Inputs, types, and behavior

Inputhref: Typestring; BehaviorRequired destination; unsafe schemes render nothing.
Inputtitle: Typestring; BehaviorRequired card title and the start of its accessible name.
Inputindex: Typenumber?; BehaviorFinite non-negative values are zero-padded; negative and non-finite values are omitted.
Inputmeta: Typestring[]?; BehaviorOptional register row above the body copy.
Inputglyph: TypeReactNode?; BehaviorOptional decorative 20px currentColor SVG in the top right.
Inputchildren: TypeReactNode?; BehaviorOptional body copy at /70 ink.
InputclassName: Typestring?; BehaviorMerged last onto the root anchor.

tsx
<LinkCard
  href="/identity/studies/vvver-cafe"
  index={1}
  meta={["Study", "Hospitality"]}
  title="Café identity study"
>
  Sixteen calibration frames covering service, evidence, and the opening ritual.
</LinkCard>

Component reference

Person card

Portrait, name, role, and optional meta. The portrait is optional: without one the card draws a monogram from the name, so a directory survives missing photography. Images keep the packaged black-and-white treatment. The card is static — a person is content, not a control — so wrap it or pair it with a separate action when a profile needs to be reachable.

Live specimen

Rendered output

Portrait of a person seated on wooden steps

Avery Lin

Design director

Sets art direction and reviews every release against the decision test.

Since 2024Studio

Jordan Reyes

Systems engineer

Maintains the component contract, accessibility budget, and export suite.

Maintainer

API reference

Inputs, types, and behavior

Inputname: Typestring; BehaviorRequired; also the source of the fallback monogram.
Inputrole: Typestring?; BehaviorOptional role line under the name.
InputimageSrc / imageAlt: Typestring?; BehaviorOptional portrait; omitting it renders the monogram instead. Alt defaults to an empty string.
Inputmeta: Typestring[]?; BehaviorOptional register row at the foot of the card.
InputheadingAs: Type"h2" | … | "p"; BehaviorHeading element for the name; defaults to h3.
Inputchildren: TypeReactNode?; BehaviorOptional body copy at /70 ink.
InputclassName: Typestring?; BehaviorMerged last onto the root surface.

tsx
<PersonCard
  imageSrc="/images/team/avery.jpg"
  imageAlt="Portrait of Avery Lin"
  meta={["Since 2024", "Studio"]}
  name="Avery Lin"
  role="Design director"
>
  Sets art direction and reviews every release against the decision test.
</PersonCard>

Component reference

Record card

A result shown together with where it came from. The system asks every claim to carry its source, scope, and status instead of asserting authority, and this is the card that does it: a record register, a title, labelled provenance fields, and an optional trace line for the exact receipt. It is static, because the provenance is the content rather than a control.

Live specimen

Rendered output

Record / 07Verified

Café calibration set

Complete, reviewed against the selection gate, and cleared for publication.

Source: Field survey · sheet 04
Captured: 2026-02-11
Scope: Sixteen frames, one sector

receipt: vvver-cafe/2026-02-11/checksum-9f2c

Record / 08

Markets session sample

Partial: the missing frames are noted rather than silently omitted.

Source: Automated export
Limitations: Two frames pending re-shoot

API reference

Inputs, types, and behavior

Inputtitle: Typestring; BehaviorRequired record title.
Inputrecord: Typestring?; BehaviorOptional register label in the top left.
Inputstatus: Typestring?; BehaviorOptional status in the top right, marked with a solid square at full ink.
Inputfields: Type{ label, value }[]?; BehaviorProvenance pairs rendered as a definition list so the pairing survives without the layout.
Inputtrace: Typestring?; BehaviorOptional monospace receipt line below a hairline; wraps rather than truncates.
InputheadingAs: Type"h2" | … | "p"; BehaviorHeading element for the title; defaults to h3.
Inputchildren: TypeReactNode?; BehaviorOptional body copy at /70 ink.
InputclassName: Typestring?; BehaviorMerged last onto the root surface.

tsx
<RecordCard
  record="Record / 07"
  status="Verified"
  title="Café calibration set"
  fields={[
    { label: "Source", value: "Field survey · sheet 04" },
    { label: "Captured", value: "2026-02-11" },
  ]}
  trace="receipt: vvver-cafe/2026-02-11/checksum-9f2c"
>
  Complete, reviewed against the selection gate, and cleared for publication.
</RecordCard>

Component reference

Service card

A static service summary with one hairline edge, a configurable heading tier, an optional currentColor glyph, and freeform body copy. It has no hover reaction because the root is not interactive. A containing anchor is valid when the content has no nested controls; otherwise pair the surface with a separate native action.

Live specimen

Rendered output

Editorial direction

Art direction, type hierarchy, and image sequencing for books and long-form websites.

Design-system stewardship

Component maintenance, accessibility review, and release notes.

Static card / separate action

API reference

Inputs, types, and behavior

Inputtitle: Typestring; BehaviorVisible card heading.
InputheadingAs: Type"h2"–"h6" | "p"; BehaviorHeading element selected to fit the surrounding document; defaults to h3.
Inputglyph: TypeReactNode?; BehaviorOptional decorative 20px slot. Draw SVG geometry with currentColor.
Inputchildren: TypeReactNode?; BehaviorOptional freeform body content; no root opacity is applied.
InputclassName: Typestring?; BehaviorMerged last onto the root surface.

Component reference

Spotlight card

A freeform hairline content surface with no implicit interaction. It leaves the contrast and motion of arbitrary children untouched, so readable text remains at its authored opacity in every state.

Live specimen

Rendered output

Freeform content

Readable secondary text remains at its authored opacity on hover, focus, coarse pointers, and reduced-motion settings.

Independent action

Consumer-authored links keep their own focus and interaction states.

Review editorial card ↑

API reference

Inputs, types, and behavior

Inputchildren: TypeReactNode; BehaviorRequired freeform content rendered without inherited opacity or motion.
InputclassName: Typestring?; BehaviorMerged last onto the root surface.