Skip to content
Back to What's New

Dev

One base card

Dieter Luypaert

Figma’s 05-Cards file keeps growing, and a stylesheet per card would grow with it. CDS now ships one Card instead: a clipped, padded flex column with the brand’s corner radius. Every card in Figma is that card plus layouts, components and utilities that already exist.

Few defaults, opt-in features

A bare .tng-card has padding, a gap equal to the padding, the corner radius and clipping. It has no surface and no border, because several cards in Figma have neither. Everything else is opt-in:

  • .has-surface and .has-border paint the card’s own background and border.
  • .has-backdrop and .has-scrim lay a flat dim or a gradient over media that covers the card.
  • .tng-card-fullbleed lets a child bleed to the card’s edge.
  • .is-responsive-padding widens the inline padding from 1024px.
  • .is-contrast on the card switches the card and everything inside it.

Composing a card

The Smart block card is a link card on a 16:9 frame, with a scrim, and its text centred at the bottom. Nothing in it is specific to Smart blocks:

<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>
Open in playground
New cars Find the Toyota that fits your life.

The only new utilities this needed are .text-start, .text-center and .text-end, documented under Varia.

Considerations

The Card is in quarantine while more Figma cards are checked against it, so its classes may still move.

The Card’s Modules rebuild the Simple card, the Feature carousel card and the Smart block card from Figma. See the Card documentation.