asw/content/docs/components.md

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

Callouts

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

<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.

<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.

<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.

<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.

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

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

---

Layout primitives

Grid

<!-- 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

<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.

<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

<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

<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.

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