COMPONENTS

Cards and layouts

Use a small set of layout classes. Grids adapt intrinsically; rows wrap; stacks arrange content vertically.

Usage

Markup: .card, .container, .grid, .row, .stack

Behaviour: Layouts arrange content; there is no numbered 12-column API.

Component API and styling module · Inherited appearance settings

Cards

Apply .card to an article or section. Shared shape, density, depth and border attributes control its treatment.

Your next project

A surface for related content.

<article class="card" data-shape="rounded" data-depth="subtle">
  <h3>Your next project</h3>
  <p>A surface for related content.</p>
  <a href="#main">Read more</a>
</article>

Responsive grids

The default grid fits as many columns as space permits. cols-2 and cols-3 switch to one column below 40rem.

First card

First column.

Second card

Second column.

<div class="grid cols-2" data-gap="large">
  <article class="card"><h3>First card</h3><p>First column.</p></article>
  <article class="card"><h3>Second card</h3><p>Second column.</p></article>
</div>

Rows and stacks

Combine .row, .stack and alignment utilities. data-gap can be inherited from html or a section, or overridden on a layout.

A vertical stack.

Actions wrap when space runs out.

<div class="stack" data-gap="large">
  <p>A vertical stack.</p>
  <div class="row justify-between" data-gap="small">
    <span>Actions wrap when space runs out.</span>
    <button type="button">Continue</button>
  </div>
</div>

Containers and prose

data-width can set inherited container defaults or be overridden on .container. .prose limits text measure independently of the page width.

Comfortable reading

A narrow container with a readable text measure.

<section class="container" data-width="narrow">
  <div class="prose">
    <h3>Comfortable reading</h3>
    <p>A narrow container with a readable text measure.</p>
  </div>
</section>