Card

Basic card

A title, a line of text and the actions. Padding and the gap between the parts follow the density.

<article class="dsgn-card">
  <h3 class="dsgn-card-title">Invoice 2026-114</h3>
  <p class="dsgn-card-text">Sent on 28 September. Due in 14 days.</p>
  <div class="dsgn-card-actions">
    <button class="dsgn-button" data-variant="subtle" data-intent="neutral" type="button">Download PDF</button>
    <button class="dsgn-button" type="button">Send reminder</button>
  </div>
</article>

With an icon

An icon as the first child sits on top. Give it a background with data-variant and a colour with data-intent.

<article class="dsgn-card">
  <span class="dsgn-icon" data-variant="subtle" data-intent="success" aria-hidden="true">savings</span>
  <h3 class="dsgn-card-title">Paid on time</h3>
  <p class="dsgn-card-text">92 % of invoices this quarter were paid before the due date.</p>
</article>

With an image

Put a dsgn-media frame with the class dsgn-card-media first. It runs flush with the card edges. Use an icon or an image, not both.

Studio Kolo

Branding and print. Client since 2023.

<article class="dsgn-card">
  <div class="dsgn-media dsgn-card-media"><img src="/img/docs/card-sample.svg" alt="" width="640" height="360"></div>
  <h3 class="dsgn-card-title">Studio Kolo</h3>
  <p class="dsgn-card-text">Branding and print. Client since 2023.</p>
</article>

content_copy

Centred

data-align="center" centres the icon, title, text and actions. An image stays full width.

<article class="dsgn-card" data-align="center">
  <span class="dsgn-icon" data-variant="subtle" aria-hidden="true">mail</span>
  <h3 class="dsgn-card-title">Check your inbox</h3>
  <p class="dsgn-card-text">We sent a sign-in link to jana@studiokolo.cz.</p>
  <div class="dsgn-card-actions">
    <button class="dsgn-button" data-variant="subtle" data-intent="neutral" type="button">Resend the link</button>
  </div>
</article>

Link card

When the whole card leads somewhere, make the card the link. When the card also has buttons, put a dsgn-card-link in the title instead: it stretches over the card and the buttons keep working. Both get a stronger border on hover and the focus ring around the whole card.

<div class="dsgn-grid" data-cols="1" data-cols-tablet="2">
  <a class="dsgn-card" href="#link-card">
    <h3 class="dsgn-card-title">Clients</h3>
    <p class="dsgn-card-text">48 active, 3 new this month.</p>
  </a>
  <article class="dsgn-card">
    <h3 class="dsgn-card-title"><a class="dsgn-card-link" href="#link-card">Invoice 2026-115</a></h3>
    <p class="dsgn-card-text">Draft. Not sent yet.</p>
    <div class="dsgn-card-actions">
      <button class="dsgn-button" data-variant="ghost" data-intent="danger" type="button">Delete draft</button>
    </div>
  </article>
</div>

Glass

data-surface="glass" makes the card frosted over a photo or a colourful band. Blur is costly, so use it for one or two cards per view. Where the browser has no blur, the card stays solid.

Accessibility

• Use a heading for the title, at the level that fits the page outline.
• A link card is one link: keep its content short, because a screen reader reads all of it as the link name.
• An image that only decorates gets alt=""; one that carries information gets a description.

Usage

A container, not a control: raised surface, 1 px border (inset, no size change), radius-l, padding = inset and gap = stack (both follow Density). Any content can go between the text and the actions (a list, a stat, a form) — the card is a plain grid.

Image on top — a Media frame as the first child, flush with the card edges:

Icon on top instead of an image (one or the other) — any .dsgn-icon as the first child; with a background (data-variant subtle | solid), data-size, data-intent (see icon.css):

(.dsgn-card-icon, the 0.10 wrapper, still works but is deprecated.)

Alignment — start (default) or centred: icon, title, text and actions centre, an image stays full width.

Glass — over a photo or a colourful band: data-surface="glass" (surface-glass + background blur; solid where blur is unsupported). Use it for one or two cards per view; blur is costly.

Link card — either the whole card is the link (no buttons inside), or the title link stretches over the card so buttons inside keep working. Both get hover (stronger border) and the focus ring on the whole card:

Attributes

Details

Classes

.dsgn-card .dsgn-card-title .dsgn-card-text .dsgn-card-actions .dsgn-icon .dsgn-card-icon .dsgn-card-media .dsgn-card-link

Tokens used

--dsgn-accent-subtle --dsgn-accent-text --dsgn-border --dsgn-border-strong --dsgn-border-width --dsgn-control-font-size --dsgn-control-gap --dsgn-control-height --dsgn-control-line-height --dsgn-danger-subtle --dsgn-danger-text --dsgn-duration --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-size-title --dsgn-font-weight-semibold --dsgn-inset --dsgn-line-container --dsgn-line-height-body-s --dsgn-line-height-title --dsgn-neutral-subtle --dsgn-neutral-text --dsgn-radius-l --dsgn-radius-m --dsgn-shadow-raised --dsgn-space-16 --dsgn-stack --dsgn-success-subtle --dsgn-success-text --dsgn-surface-glass --dsgn-surface-raised --dsgn-text --dsgn-text-muted --dsgn-warning-subtle --dsgn-warning-text

In Figma

Card

Import alone

dsgn.systems/components/card.css