Card

Flat surface, no border, radius-lg. A step lighter than the page marks the edge. Elevation is opt-in, reserved for the one focused card in a view — a dialog, the primary capture card.

A <div>/<article> is too generic to style bare, so Card keeps one sanctioned class. [data-elevated] is for the single most-elevated element on screen — never a whole grid of cards at once.

Flat vs. elevated

<div class="card" style="width: 14rem; padding: var(--gl-space-s);">Flat — the default.</div>
<div class="card" data-elevated style="width: 14rem; padding: var(--gl-space-s);">Elevated — one per view.</div>

As a content tile

Used standalone (not as a row-list), .card is fine on its own — .card-body and .card-footer are two more sanctioned classes, for the one shape inside it that has no element of its own to hang a selector on.

<article class="card" style="max-width: 18rem;">
  <div class="card-body">
    <p class="type-label" style="margin:0;">Recommended</p>
    <h3>Rename the caution color</h3>
    <p>Three people have called it "yellow" in review this month.</p>
  </div>
  <div class="card-footer">
    <button data-variant="primary" data-size="sm">Approve</button>
    <button data-variant="ghost" data-size="sm">Dismiss</button>
  </div>
</article>

As a list — with CardRow

Card’s most common job in this system is holding a list of CardRows: entry lists, task lists, settings rows. In that shape Card is a real <ul class="card"> and CardRow is a bare <li> — the divider between rows comes from the .card > li descendant selector, no second class needed.

<ul class="card" style="max-width: 22rem;">
  <li>Dishwasher manual</li>
  <li>Sofa receipt</li>
  <li>Passport scan</li>
</ul>

API