Cards

The default card

A 1px border, a 12px radius, and 24px of padding. No shadow — separation comes from the edge, which suits a flat, geometric brand and stays legible in both themes.

<div class="tmt-grid">
  <div class="tmt-card">
    <div class="tmt-card__body">
      <p class="tmt-eyebrow">Living room</p>
      <p class="tmt-h4">Ceiling light</p>
      <p class="tmt-small tmt-muted">On since 14:20 · 8.5 W</p>
    </div>
    <div class="tmt-card__footer">
      <button class="tmt-btn tmt-btn--secondary tmt-btn--sm">Turn off</button>
    </div>
  </div>
</div>

The footer uses margin-block-start: auto, so in a grid of cards of different heights every footer still lines up along the bottom.

Parts and variants

Clickable cards

Making a whole card clickable is easy to get wrong. Wrapping everything in an <a> gives a screen reader user one enormous link that reads the entire card as its name, and it makes any nested button unreachable.

The system uses the "pseudo-element overlay" approach instead: one real link on the title, stretched to cover the card. The link's accessible name is just the title, the focus ring is drawn around the whole card, and the card's text stays selectable.

<div class="tmt-card tmt-card--link">
  <div class="tmt-card__body">
    <p class="tmt-eyebrow">Guide</p>
    <p class="tmt-h4"><a href="/guides/schedule">Setting up a schedule</a></p>
    <p class="tmt-small tmt-muted">Four steps, about two minutes.</p>
  </div>
</div>

Inverse and pattern cards

A black card is the strongest emphasis available in a monochrome system. Use one per screen at most — two black cards side by side cancel each other out.

<div class="tmt-card tmt-card--inverse tmt-pattern tmt-pattern--inverse">
  <div class="tmt-card__body">
    <p class="tmt-eyebrow">This month</p>
    <p class="tmt-h2">128 kWh</p>
    <p class="tmt-small">14% less than last month.</p>
  </div>
</div>

What goes in a card

• One idea. A card that needs a scrollbar or a tab strip is a page.
• A title, in a real heading where the card is part of a list of things — the headings are how a screen reader user moves between them. Use the .tmt-h4 class on whatever heading level fits the page's outline.
• At most two actions, in the footer.
• Equal information across a set. Cards in a grid are compared to each other; one card with an extra line of metadata reads as more important than it is.