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; optional .responsive parent

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

Component API and styling module · Inherited appearance settings

A layout inside a narrow parent

The responsive wrapper measures its own width. The fixed-column grid collapses below 40rem even on a wide desktop. Put the wrapper inside a sized parent; do not put containment on a subgrid card.

First item

One column in this narrow space.

Second item

The browser window can remain wide.

<div style="max-inline-size: 32rem;">
  <div class="responsive">
    <div class="grid cols-2">
      <article class="card"><h3>First item</h3><p>One column in this narrow space.</p></article>
      <article class="card"><h3>Second item</h3><p>The browser window can remain wide.</p></article>
    </div>
  </div>
</div>

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>

The default grid fits as many columns as space permits. cols-2 and cols-3 switch to one column below 40rem. Inside a responsive wrapper they also use the wrapper width; cols-3 uses two columns from 40rem to below 60rem.

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>