Card – Tsunami

Usage

A header holds an h2 title, a p subtitle and an aside for buttons on the right. Content follows in section and footer.

Order #1042

Placed Oct 12, 2026 by Emma Wilson

3 items, $74.00 in total.

<article class="card">
  <header>
    <h2>Order #1042</h2>
    <p>Placed Oct 12, 2026 by Emma Wilson</p>
    <aside>
      <button type="button" class="btn" data-size="sm">Edit</button>
      <button type="button" class="btn" data-variant="primary" data-size="sm">Fulfill</button>
      <button type="button" class="btn" data-size="sm" popovertarget="card-more">
        More
        <i class="icon icon-chevron-down" aria-hidden="true"></i>
      </button>
      <div class="dropdown" id="card-more" popover>
        <button type="button" popovertarget="card-more" popovertargetaction="hide"><i class="icon icon-copy" aria-hidden="true"></i>Duplicate</button>
        <button type="button" popovertarget="card-more" popovertargetaction="hide"><i class="icon icon-printer" aria-hidden="true"></i>Print packing slip</button>
        <hr />
        <button type="button" data-variant="danger" popovertarget="card-more" popovertargetaction="hide"><i class="icon icon-trash-2" aria-hidden="true"></i>Delete</button>
      </div>
    </aside>
  </header>
  <section>
    <p>3 items, $74.00 in total.</p>
  </section>
  <footer>
    <p>Updated 5 minutes ago</p>
    <button type="button" class="btn">View all</button>
  </footer>
</article>

Header with a title, a subtitle and an action

The line under the header shows only when another part follows. The title, subtitle and action share a row, with the action on the right, centered vertically.

Shipping address

742 Evergreen Terrace, Springfield, OR 97477

Shipping address

Where this order is delivered

742 Evergreen Terrace, Springfield, OR 97477

<div class="stack">
  <section class="card">
    <header>
      <h2>Shipping address</h2>
    </header>
    <section>
      <p>742 Evergreen Terrace, Springfield, OR 97477</p>
    </section>
  </section>
  <section class="card">
    <header>
      <h2>Shipping address</h2>
      <p>Where this order is delivered</p>
      <aside>
        <button type="button" class="btn" data-size="sm">Edit</button>
      </aside>
    </header>
    <section>
      <p>742 Evergreen Terrace, Springfield, OR 97477</p>
    </section>
  </section>
</div>

Header with a figure, its change and a link

Add a strong to the header and the h2 becomes a small gray label above the figure. In the aside, the link sits above the span[data-trend].

Total revenue

$4,148.64

Compared with the previous 30 days.

<section class="card">
  <header>
    <h2>Total revenue</h2>
    <strong>$4,148.64</strong>
    <aside>
      <a href="#">View orders</a>
      <span data-trend="up"><i class="icon icon-arrow-up" aria-hidden="true"></i>40.1%</span>
    </aside>
  </header>
  <section>
    <p>Compared with the previous 30 days.</p>
  </section>
</section>

Table card

A table that is a direct child of the card (or inside a .scroll-area when there are many columns) runs edge to edge. The header uses a ghost search field and filters. The footer has the result count on the left and pagination on the right.

Public: Yes

Product
Timeless Watch	-	10	Edit
Magic Pen	3	0	Edit

<section class="card">
  <header>
    <div class="input-group" data-variant="ghost">
      <span><i class="icon icon-search" aria-hidden="true"></i></span>
      <input type="search" placeholder="Search products" aria-label="Search products" />
    </div>
    <aside>
      <a href="#" class="btn" data-variant="ghost" data-size="sm">Clear</a>
      <button type="button" class="btn" data-size="sm"><i class="icon icon-list-filter" aria-hidden="true"></i>Filters</button>
    </aside>
  </header>
  <section>
    <span class="badge">Public: Yes</span>
  </section>
  <div class="scroll-area" tabindex="0">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Product</th>
          <th scope="col" data-align="end" aria-sort="none"><button type="button">Variants</button></th>
          <th scope="col" data-align="end" aria-sort="descending"><button type="button">Ranking</button></th>
          <th scope="col" data-align="end" aria-label="Actions"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Timeless Watch</th>
          <td data-align="end">-</td>
          <td data-align="end">10</td>
          <td data-align="end"><a href="#" class="btn" data-size="sm">Edit</a></td>
        </tr>
        <tr>
          <th scope="row">Magic Pen</th>
          <td data-align="end">3</td>
          <td data-align="end">0</td>
          <td data-align="end"><a href="#" class="btn" data-size="sm">Edit</a></td>
        </tr>
      </tbody>
    </table>
  </div>
  <footer>
    <p>67 results</p>
    <nav class="pagination" aria-label="Pagination">
      <a href="#" aria-current="page">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#" aria-label="Next page"><i class="icon icon-chevron-right" aria-hidden="true"></i></a>
    </nav>
  </footer>
</section>

Empty table card

When there is no data yet, use .empty in place of the table.

No products yet

Add your first product to start selling.

New product

<section class="card">
  <section class="empty">
    <i class="icon icon-package" aria-hidden="true"></i>
    <h3>No products yet</h3>
    <p>Add your first product to start selling.</p>
    <div>
      <a href="#" class="btn" data-variant="primary">New product</a>
    </div>
  </section>
</section>

Needs attention: data-variant="warning"

A 2px warning-colored top border for a card that needs attention. danger, info and ok work the same way.

Payment disputed

The cardholder claims the order was not received.

<section class="card" data-variant="warning" style="max-width: 28rem">
  <header>
    <h2>Payment disputed</h2>
    <aside><span class="badge" data-variant="warning">Respond within 4 weeks</span></aside>
  </header>
  <section>
    <p>The cardholder claims the order was not received.</p>
  </section>
</section>

Attributes

Attribute / element	Values	Description
`.card`	`article`, `section`, `div`	The card box. Every direct child gets padding and a divider above it
`> header`		Card header: a two-column grid, text on the left, `aside` on the right
`> header h2 / h3`		Card title, 14px bold
`> header p`		Grey subtitle under the title
`> header > aside`		Buttons or badges on the right. Spans both rows when there is a title and a subtitle
`> header > strong`		Large figure. Turns the `h2` into a small gray label and stacks the `aside` vertically on the right
`header [data-trend]`	`up`, `down`; empty = gray	Change in the figure: up = ok color, down = danger color
`> section, > div`		Content, with the same padding in every part
`> footer`		Buttons on the right. The first `p` sits on the left in gray (such as a result count)
`> .table, > .scroll-area > .table`		Edge-to-edge table. The first and last cells line up with the card padding
`> .empty`		Empty state in place of a table
`> .stat, > .stat-group`		Stat figures. See Stat
`data-variant`	`warning`, `danger`, `info`, `ok`; omit for normal (default)	2px top border in the status color, for a card that needs attention
`data-direction`	`row`; omit for stacked (default)	Children sit side by side, separated by vertical lines. The first child is only as wide as its content (such as a date range picker next to a stat group)