Card

Card frames one self-contained piece of content as a bounded surface with an optional header, a body, and an optional footer. It has one root hook, six part hooks, a subtle variant, three sizes, and a CSS-only linked form.

Public web API

One root hook on <article>, <section>, or <div>, plus part hooks for the header, body, and footer.

<article data-bitsy-card>
  <header data-bitsy-card-header>
    <h3 data-bitsy-card-title>Starter plan</h3>
    <p data-bitsy-card-description>For personal projects and prototypes.</p>
    <span data-bitsy-card-action>…</span>
  </header>
  <div data-bitsy-card-body>
    <p>Up to 3 projects and 1 GB of storage.</p>
  </div>
  <footer data-bitsy-card-footer>
    <button data-bitsy-button type="button">Compare plans</button>
    <button data-bitsy-button data-bitsy-variant="accent" type="button">Choose plan</button>
  </footer>
</article>

data-bitsy-variant="subtle" is for nested or low-emphasis cards; data-bitsy-size="sm" | "lg" change padding and gap.
Pick the heading level for the page outline; Card sets the size.
Inside a <div> root use <div> for header and footer so they do not become landmarks.
Lay out a set of cards with a list and a grid on the page; Card does not do it.

Variants and sizes

The footer pushes Buttons to the end, and two children spread to both ends.

Starter plan

For personal projects and prototypes.

Current

Up to 3 projects and 1 GB of storage.

A body-only card holds any content with no header or footer.

Usage this month

Resets on the 1st.

1,284 of 5,000 requests.

Team settings

A subtle card nests inside a default card.

Nested, no second shadow.

Small

Tighter padding and gap.

For dense dashboards.

Large

Roomier padding and gap.

For featured content.

Subtle

Secondary background, no shadow.

Low emphasis.

Linked cards

Put data-bitsy-card-link on the one link in the title and the whole card becomes the target. Tab stops once per card.

Atlas

Updated 2 hours ago

Design system migration for the billing app.
Beacon

Updated yesterday

Onboarding flow experiments.
A long project title that wraps

Updated last week

Supercalifragilisticexpialidocious_unbroken_word_stays_inside.

Foundation versus Bit

u-surface draws the same box. data-bitsy-card adds the parts, the sizes, the subtle variant, and the linked form. Card never styles the insides of the Buttons or Badges placed in it, and it ships no JavaScript.