Card

A Card is a clipped, padded box that groups related content. It ships few defaults and a handful of opt-in features; the rest of every card in Figma comes from layouts, components and utilities.

Toyota Mania

Every model, every era, one weekend.

Get tickets

Maintained by Platform

Usable — may still change

CSS Accessibility

<article class="tng-card has-surface has-border">
  <div class="tng-frame is-16-9 tng-card-fullbleed">
    <img src="/assets/toyota-mania.webp" alt="" />
  </div>
  <h3 class="tng-text-title">Toyota Mania</h3>
  <p class="tng-text-body">Every model, every era, one weekend.</p>
</article>

Toyota Mania

Every model, every era, one weekend.

A bare .tng-card has no surface and no border. Its defaults:

What	Default
Layout	Flex column
Padding	16, set through `--tng-card-padding-block` and `--tng-card-padding-inline`
Gap	Equal to the block padding
Corner radius	`--tng-cards-corner-radius`: square on Toyota, 8px on Lexus, 10px on Kinto
Clipping	Content and media are clipped to the corner radius
Text colour	Follows the scheme; `.is-contrast` on the card switches it and its content

Elements

Media

A direct-child <img>, <picture>, <video> or .tng-card-media covers the whole card, behind the content.

<div class="tng-card has-backdrop">
  <img src="/assets/toyota-mania.webp" alt="" />
  <h3 class="tng-text-title">Toyota Mania</h3>
  <p class="tng-text-body">Every model, every era, one weekend.</p>
</div>

Toyota Mania

Every model, every era, one weekend.

Frame

A frame is ordinary content: it sits inside the padding like any other child.

<div class="tng-card has-surface has-border">
  <div class="tng-frame is-16-9">
    <img src="/assets/toyota-mania.webp" alt="" />
  </div>
  <h3 class="tng-text-title">Toyota Mania</h3>
</div>

Toyota Mania

Full bleed

A direct child with .tng-card-fullbleed bleeds through the inline padding to the card’s edge, and through the block padding when it is the first or last child. It works on any element, not only a frame. It reads the padding from --tng-card-padding-*, so change the padding through those properties rather than a p-* utility.

<div class="tng-card has-surface has-border">
  <h3 class="tng-text-title">Toyota Mania</h3>
  <div class="tng-frame is-16-9 tng-card-fullbleed">
    <img src="/assets/toyota-mania.webp" alt="" />
  </div>
</div>

Toyota Mania

Surface

.has-surface paints the card background: --tng-cards-rested-background-color, or --tng-color-surface-contrast-subtle on a contrast card.

<div class="tng-card has-surface">
  <h3 class="tng-text-title">Toyota Mania</h3>
  <p class="tng-text-body">Every model, every era, one weekend.</p>
</div>

Toyota Mania

Every model, every era, one weekend.

Border

.has-border draws a 1px --tng-cards-border-color border, or --tng-color-border-contrast-muted on a contrast card. Use the border utilities for any other border.

<div class="tng-card has-border">
  <h3 class="tng-text-title">Toyota Mania</h3>
  <p class="tng-text-body">Every model, every era, one weekend.</p>
</div>

Toyota Mania

Every model, every era, one weekend.

Backdrop

.has-backdrop dims the media evenly and switches the text to the contrast colour. Add .is-contrast when the card holds components, so they switch too. See Media above.

Scrim

.has-scrim lays a dark gradient over the media, darkest at the top and bottom edges, and switches the text to the contrast colour.

<div class="tng-card tng-frame is-16-9 has-scrim justify-content-end">
  <img src="/assets/toyota-mania.webp" alt="" />
  <h3 class="tng-text-title">Toyota Mania</h3>
</div>

Toyota Mania

Responsive padding

.is-responsive-padding raises the inline padding to 24 from 1024px.

<div class="tng-card has-surface has-border is-responsive-padding">
  <h3 class="tng-text-title">Toyota Mania</h3>
  <p class="tng-text-body">Every model, every era, one weekend.</p>
</div>

Toyota Mania

Every model, every era, one weekend.

Contrast

.is-contrast on the card switches the card and everything inside it.

<div class="tng-card has-surface has-border is-contrast">
  <h3 class="tng-text-title">Toyota Mania</h3>
  <a class="tng-button is-secondary" href="#">Get tickets</a>
</div>

Toyota Mania

Get tickets

Link

When the whole card is one destination, make the card the <a>. It gets the focus ring, and its media zooms on hover and press.

<a
  class="tng-card tng-frame is-16-9 has-scrim justify-content-end"
  href="#"
>
  <img src="/assets/toyota-mania.webp" alt="" />
  <span class="tng-text-title">Toyota Mania</span>
</a>

Toyota Mania

Utilities

The card is a flex column, so the layout utilities (gap-*, align-items-*, justify-content-*, align-self-*) and the spacing utilities (p-*, pbe-*, …) adjust it directly. Align text with .text-start, .text-center and .text-end (Varia).

Modules

The cards in Figma, composed from the card, layouts and utilities.

Simple card

<div class="tng-card has-backdrop has-border is-contrast gap-3xl">
  <img src="/assets/toyota-mania.webp" alt="" />
  <h3 class="tng-text-title">Toyota Mania</h3>
  <p class="tng-text-body">Every model, every era, one weekend.</p>
  <a class="tng-link is-neutral" href="#">
    <span>Get tickets</span>
    <i class="tng-icon icon-arrow-right" aria-hidden="true"></i>
  </a>
</div>

Toyota Mania

Every model, every era, one weekend.

Get tickets

Feature carousel card

<article
  class="tng-card has-surface has-border is-responsive-padding gap-3xl pbe-3xl"
>
  <div class="tng-frame tng-card-fullbleed">
    <img src="/assets/toyota-mania.webp" alt="" />
    <button
      class="tng-icon-button is-md is-filled on-contrast align-self-center justify-self-center"
      aria-label="Play video"
    >
      <i class="tng-icon icon-player" aria-hidden="true"></i>
    </button>
    <span class="tng-tag align-self-end justify-self-end m-3xl">
      Topic 1
    </span>
  </div>
  <span class="tng-label align-self-end">
    <i class="tng-icon icon-time" aria-hidden="true"></i>
    <span>2 min</span>
  </span>
  <div class="tng-stack gap-xl">
    <h3 class="tng-text-title is-8">Toyota Mania</h3>
    <p class="tng-text-body">Every model, every era, one weekend.</p>
  </div>
  <a class="tng-button" href="#">Get tickets</a>
  <a class="tng-button is-secondary" href="#">See the programme</a>
</article>

Topic 1

2 min

Toyota Mania

Every model, every era, one weekend.

Get tickets See the programme

Smart block card

<a
  class="tng-card tng-frame is-16-9 has-scrim p-4xl gap-none justify-content-end align-items-center text-center"
  href="#"
>
  <img src="/assets/toyota-mania.webp" alt="" />
  <span class="tng-text-title is-10 tng-overflow-ellipsis">
    New cars
  </span>
  <span class="tng-text-body is-emphasis">
    Find the Toyota that fits your life.
  </span>
</a>

New cars Find the Toyota that fits your life.

A card is a visual grouping, not a widget: it has no role, keyboard behaviour or state of its own. Its accessibility comes from the markup inside it. Two patterns cover most cards: a card that holds its own links and buttons, and a card that is one link. A link card follows the WAI-ARIA Link pattern. The target is WCAG 2.1 AA.

For designers

Text over media needs a layer. Text on a photo meets 1.4.3 Contrast (Minimum) only over a backdrop or scrim. Don’t rely on a dark photo.
One destination or many, not both. A card that is one link can’t also hold buttons or other links. If it needs several actions, give each its own control.
Keep link cards short. Everything inside a link card becomes the link’s name, read out in one go.
Focus stays visible (2.4.7 Focus Visible). The ring sits outside the card, on the page background, so it holds on cards with media.

For developers

<article> for self-contained cards. Use <article> when the card would make sense on its own, such as a story or an offer, and start it with a heading. Use a <div> when the card only groups part of a larger section. A list of cards can be a <ul> of cards (1.3.1 Info and Relationships).
A link card is an <a class="tng-card">. The whole card is the target and its text is the link’s name (2.4.4 Link Purpose). Never nest other links or buttons inside it. The focus ring is built in.
Decorative media gets alt="". Media behind the content is usually decoration. When it carries meaning, describe it in alt (1.1.1 Non-text Content).
Hover zoom respects reduced motion. The media of a link card only zooms under prefers-reduced-motion: no-preference.