Skip to content

Card

Stable Available in release assets

Group related content, metadata, and actions in a raised surface without replacing semantic landmarks or native control behavior.

Card primary example

Show code
<article class="thin-card">
  <div class="thin-cluster">
    <strong>Order #1042</strong>
    <span class="thin-badge" data-tone="success">Paid</span>
  </div>
  <p>Ready to ship from the Montreal workshop.</p>
</article>

Each authored example uses the production assets and includes copyable markup.

Default card

A semantic grouping surface for related content and actions.

Show code
<article class="thin-card">
  <div class="thin-cluster">
    <strong>Order #1042</strong>
    <span class="thin-badge" data-tone="success">Paid</span>
  </div>
  <p>Ready to ship from the Montreal workshop.</p>
</article>

Dense card

Padding and gap can be tuned with card configuration variables.

Show code
<article class="thin-card" style="--thin-card-padding: var(--thin-space-s); --thin-card-gap: var(--thin-space-xs)">
  <strong>Compact summary</strong>
  <p>Fits beside dense dashboards.</p>
</article>

Linked card content

Links and buttons inside a card remain ordinary native controls.

Show code
<article class="thin-card">
  <h2><a href="/orders/1042">Order #1042</a></h2>
  <p>Track shipment updates on the order page.</p>
</article>

Anatomy

  • Native .thin-card host
  • Authored headings, text, and controls
  • Optional badges or status markers
  • Optional links or buttons

Variants and sizes

  • Default — shown above
  • Compact padding — shown above
  • Linked heading — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Default
  • Long localized copy
  • Missing optional media
  • Narrow container
  • 200% and 400% zoom
  • Forced colors
  • High-contrast theme

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The card owns no interaction. Links, buttons, and forms inside the card use native browser behavior.

Accessibility

Use real headings beneath page landmarks, keep meaningful link and button text, and do not make the entire card a single clickable target unless it is a native link or button. Decorative badges must not be the only state cue.

Contract
NATIVE
Basis
Styles native HTML elements; no APG widget

API

Wrap authored content in unregistered thin-card. Adjust density with --thin-card-padding and --thin-card-gap on the host or an ancestor.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-card-paddingvar(--thin-space-m)Inset spacing around card content.
--thin-card-gapvar(--thin-space-m)Gap between direct card children.

Fallback

Without Thin-Sky CSS, headings, paragraphs, links, and buttons remain in document order and fully operable.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/card/style.ts

Stability evidence

  • CSS-only semantic grouping contract with no JavaScript dependency: test:tests/unit/library/overlays-feedback-stable.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/overlays-feedback-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Composes

Used by