asw/content/docs/layouts.md

---
title: "Layouts"
description: "All data-layout values and how to use them — docs scaffold, grids, hero, prose, timeline, and more."
type: docs
weight: 40
date: 2026-04-09
tags: ["layouts", "css", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"

---

`data-layout` on any element activates a layout pattern. No classes needed.

---

## Docs layout

Three-column scaffold: sidebar, content, TOC. Source order: left `<aside>` → content → right `<aside data-toc>`.

```html
<div data-layout="docs">
  <aside>
    <nav data-nav="sidebar" aria-label="Docs">
      <small>Getting started</small>
      <ul>
        <li><a href="/docs/introduction/" aria-current="page">Introduction</a></li>
        <li><a href="/docs/tokens/">Token System</a></li>
      </ul>
    </nav>
  </aside>

  <article>
    <h1>Page title</h1>
    <p>Content goes here.</p>
  </article>

  <aside data-toc>
    <small>On this page</small>
    <nav>
      <ul>
        <li><a href="#section">Section</a></li>
      </ul>
    </nav>
  </aside>
</div>
```

The right TOC hides below ~1280px. The left sidebar hides below ~768px.

---

## Hero

Landing page header block. Centers content, adds vertical padding, draws a bottom border.

```html
<header data-layout="hero">
  <h1>Agentic Semantic Web</h1>
  <p>CSS for agent-generated content.</p>
  <p data-layout="install"><code>@import "agentic.css"</code></p>
</header>
```

### Install pill

`data-layout="install"` on a `<p>` or `<div>` renders an inline monospace pill — intended for single-line install commands inside a hero.

---

## Actions row

CTA button row, centered, wraps on small screens.

```html
<nav data-layout="actions">
  <a href="/docs/introduction/" data-role="primary">Get started →</a>
  <a href="https://github.com/..." data-role="secondary">GitHub</a>
</nav>
```

---

## Grid layouts

### Two columns

```html
<div data-layout="grid-2">
  <article>Left column</article>
  <article>Right column</article>
</div>
```

Stacks to one column below ~768px.

### Three columns

```html
<div data-layout="grid-3">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</div>
```

Stacks to one column below ~768px.

### Card grid

Auto-fill, responsive. Columns fill to a minimum of `--card-min-width` (default: `280px`).

```html
<div data-layout="card-grid">
  <article>Card A</article>
  <article>Card B</article>
  <article>Card C</article>
</div>
```

---

## Stats row

Horizontal stat display. Wraps responsively.

```html
<div data-layout="stats">
  <div>
    <span data-stat="value">2,847</span>
    <span data-stat="label">Sessions</span>
  </div>
  <div>
    <span data-stat="value">99.8%</span>
    <span data-stat="label">Uptime</span>
  </div>
  <div>
    <span data-stat="value">14</span>
    <span data-stat="label">Projects</span>
  </div>
</div>
```

---

## Prose

Constrains width to `65ch` for comfortable reading. Apply to `<main>` or any block.

```html
<main data-layout="prose">
  <h1>Article title</h1>
  <p>Long-form content at a comfortable reading width.</p>
</main>
```

---

## Fluid

Removes the max-width constraint from `<main>`. Use for full-bleed layouts.

```html
<main data-layout="fluid">
  <!-- Full-width content -->
</main>
```

---

## Timeline

Vertical chronological list with a spine line and accent dots.

```html
<ol data-layout="timeline">
  <li>
    <time>2026-04-10</time>
    <article>
      <h3>Event title</h3>
      <p>Description of what happened.</p>
    </article>
  </li>
  <li>
    <time>2026-03-28</time>
    <article>
      <h3>Earlier event</h3>
      <p>Prior milestone.</p>
    </article>
  </li>
</ol>
```

Add `alternate` to the value for a left/right alternating layout:

```html
<ol data-layout="timeline alternate">
```

---

## Report

Print-first document layout. Constrained to `72ch`, includes print stylesheet. Light surface regardless of OS theme.

```html
<div data-layout="report">
  <header>
    <h1>Report Title</h1>
    <p>Prepared 2026-04-10</p>
  </header>
  <main>
    <h2>Findings</h2>
    <p>Content here.</p>
  </main>
  <footer>Confidential · Trentuna</footer>
</div>
```

On print, links render with their URL in parentheses. `data-no-print` on any element hides it from print output.

---

## Inline definition list

Renders a `<dl>` as a two-column grid: terms on the left, definitions on the right. Apply to `<dl>` only.

```html
<dl data-layout="inline">
  <dt>--accent</dt>
  <dd>Primary action colour, sourced from Open Props <code>--green-5</code></dd>

  <dt>--surface</dt>
  <dd>Page background, adaptive light/dark</dd>

  <dt>--font-ui</dt>
  <dd>Neo-grotesque sans stack for UI chrome</dd>
</dl>
```

---

## Related

- [Data Attributes](/docs/data-attributes/) — full `data-*` vocabulary reference
- [Token System](/docs/tokens/) — the custom property values that layout tokens reference