mostlycss
Theme

Card

article.card

Card — a bounded block of related content: media, header, body, footer.

Examples

The parts, all optional

View “The parts, all optional” as

Quarterly report

Published this morning

Revenue by region, with the year-on-year comparison.

<article class="card">
  <div class="card-header">
    <h3 class="card-title">Quarterly report</h3>
    <p class="card-subtitle">Published this morning</p>
  </div>
  <div class="card-body">
    <p>Revenue by region, with the year-on-year comparison.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-sm" type="button">Open</button>
  </div>
</article>

The card sets no width — not a max-inline-size, not a breakpoint.

How wide it is depends on the grid it sits in, and that is the page’s business. .card-footer takes margin-block-start: auto, so in a row of unequal cards every footer still lands on the bottom edge.

Tokens 13

Level 2, declared on .card itself. Set any of them on that selector to restyle this component without touching the skin.

Level 2 tokens declared by card
TokenDefault
--card-inner-radiusmax(0px, calc(var(--card-radius) - var(--card-border-width)))
--card-media-aspect-ratioauto
--card-bgvar(--color-surface-raised)
--card-border-colorvar(--color-border)
--card-border-widthvar(--border-width)
--card-colorvar(--color-on-surface)
--card-divider-colorvar(--color-border-subtle)
--card-gapvar(--space-3)
--card-paddingvar(--space-4)
--card-radiusvar(--radius-box)
--card-shadowvar(--elevation-0)
--card-subtitle-colorvar(--color-on-surface-muted)
--card-title-font-sizevar(--font-size-base)

Variants and states

Variants

  • .card-lg
  • .card-quiet
  • .card-raised
  • .card-sm
  • .card-sunken

Inside it

  • .card-link
  • .card-media
  • .card-body
  • .card-footer
  • .card-header
  • .card-subtitle
  • .card-title

State it reads

Read from the platform, never mirrored into a class that could disagree with it.

  • :focus
  • :hover

Before you ship it

What you have to do 3 requirements

  1. .card-title is not a heading. Put it on a real <h2>/<h3> at the level the page's outline calls for, or the card is a paragraph in bold to everything that reads structure.
  2. Every image needs an alt. A decorative card image takes alt=""; one that carries meaning the text does not repeat takes a description.
  3. A clickable card needs .card-link on a real <a href>, and exactly one action in the card. See above.

src/css/components/card.css · npx mostlycss add card