ds
Components
Card

Card

A bordered surface. Use rows first.

Case study

Spark to Rust

Same jobs, a third of the memory.

Deep dive

ClickHouse sort keys

How the first column decides what gets read.

Draft

Coming next

A sunk card is not clickable.

Show code

<div class="cards">
  <a class="card" href="#">
    <p class="label">Case study</p>
    <h3>Spark to Rust</h3>
    <p>Same jobs, a third of the memory.</p>
  </a>
  <a class="card" href="#">
    <p class="label">Deep dive</p>
    <h3>ClickHouse sort keys</h3>
    <p>How the first column decides what gets read.</p>
  </a>
  <div class="card sunk">
    <p class="label">Draft</p>
    <h3>Coming next</h3>
    <p>A sunk card is not clickable.</p>
  </div>
</div>

Linked cards turn their title purple on hover. A card is a surface with a hairline border and a 10px radius; it never carries a shadow on fin1te.com.

Before you reach for cards, check whether the items are really peers in a grid. Most lists on the two sites are rows.

Class	On	What it does
`.card`	div, a	Bordered surface with padding.
`.sunk`	.card	On --bg-sunk, for inactive or secondary items.
`.flat`	.card	Rule on top only, no box.
`.cards`	div	Responsive grid of cards, 16rem minimum.