CSS

<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.