asw/content/docs/components.md

---
title: "Components"
description: "ASW's data-attribute vocabulary — callouts, tasks, session blocks, wikilinks, and layout primitives."
type: docs
weight: 30
date: 2026-04-09
tags: ["components", "css", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "Anthropic"

---

## Callouts

Inline advisory blocks. The `data-callout` attribute sets the semantic type; the stylesheet handles colour, icon, and layout.

```html
<div data-callout="tip">
  <span data-callout-title>Tip</span>
  <p>Use <code>data-callout</code> instead of inventing class names.</p>
</div>

<div data-callout="warning">
  <span data-callout-title>Warning</span>
  <p>Overriding Open Props palette tokens breaks theming.</p>
</div>

<div data-callout="error">
  <span data-callout-title>Error</span>
  <p>This file exceeds the token budget.</p>
</div>

<div data-callout="note">
  <span data-callout-title>Note</span>
  <p>Both <code>note</code> and <code>info</code> are valid values.</p>
</div>
```

{{< callout tip >}}
In Hugo, use the `callout` shortcode: `{{</* callout tip */>}}...{{</* /callout */>}}`
{{< /callout >}}

Valid values: `tip`, `note`, `info`, `warning`, `error`.

---

## Tasks

Render task lists with semantic state. Agents write task lists naturally; `data-task` on the `<li>` adds the visual state indicator.

```html
<ul>
  <li data-task="done">Token layer integrated</li>
  <li data-task="done">Docs site taxonomy wired</li>
  <li data-task="wip">Hugo layouts — in progress</li>
  <li data-task="blocked">Deploy — waiting on DNS</li>
  <li data-task="todo">Vocabulary retirement pass</li>
</ul>
```

Valid values: `done`, `wip`, `blocked`, `todo`.

---

## Session blocks

Mark a block as a session record with `data-session`. Optional `data-mode` indicates autonomous vs. interactive sessions.

```html
<section data-session data-mode="autonomous">
  <header>
    <h3>Session 2847</h3>
    <p data-text="dim">2026-04-02 · 31 min · claude-sonnet-4-6</p>
  </header>

  <ul>
    <li data-task="done">Vault token layer</li>
    <li data-task="wip">Paper layout</li>
  </ul>

  <div data-callout="note">
    <span data-callout-title>Handoff</span>
    <p>Next session: harden paper/single.html styles into agentic.css.</p>
  </div>
</section>
```

---

## Wikilinks

Internal knowledge-graph links. `data-wikilink` on an anchor renders it with a dotted underline to distinguish it from a regular hyperlink.

```html
<a href="/vault/tasks/" data-wikilink>Tasks</a>
```

In Hugo, use the `wikilink` shortcode:

```
{{</* wikilink "Tasks" "/vault/tasks/" */>}}
```

---

## Redacted content

Sensitive values rendered as black bars. Optional hover-reveal.

```html
<span data-redacted>API key: sk-ant-...</span>

<!-- Hover to reveal -->
<span data-redacted data-redacted-reveal>classified content</span>
```

---

## Layout primitives

### Grid

```html
<!-- Two columns, responsive stack below 600px -->
<div data-layout="grid-2">
  <article>Left</article>
  <article>Right</article>
</div>

<!-- Three columns, responsive stack below 768px -->
<div data-layout="grid-3">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</div>

<!-- Auto-fill card grid, minmax(280px, 1fr) -->
<div data-layout="card-grid">
  <article>Card A</article>
  <article>Card B</article>
  <article>Card C</article>
</div>
```

### Stats row

```html
<div data-layout="stats">
  <div>
    <span data-stat="value">2847</span>
    <span data-stat="label">Sessions</span>
  </div>
  <div>
    <span data-stat="value">99.8%</span>
    <span data-stat="label">Uptime</span>
  </div>
</div>
```

### Docs layout

Three-column sidebar scaffold. Source order matters: left aside → article → right aside.

```html
<div data-layout="docs">
  <aside>
    <nav aria-label="Documentation" data-nav="sidebar">
      <small>Section</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>
    <!-- Main content -->
  </article>

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

---

## Text utilities

```html
<p data-text="dim">Muted — var(--text-3)</p>
<p data-text="accent">Accent colour</p>
<span data-text="eyebrow">SECTION LABEL</span>
<span data-text="small">Fine print</span>
```

---

## CTA links

```html
<a href="/docs/introduction/" data-role="primary">Get started →</a>
<a href="/docs/" data-role="secondary">Documentation</a>
```

---

## Badge

Icon or token pill. Used by the landing page pillars; also useful inline.

```html
<span data-badge>&lt;/&gt;</span>
<span data-badge>data=</span>
<span data-badge>:root</span>
```