Components on ASW — Agentic Semantic Web

Components

Thu, 09 Apr 2026 00:00:00 +0000

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>

In Hugo, use the callout shortcode:

…

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

Buttons

Sat, 11 Apr 2026 00:00:00 +0000

<button> elements are styled by default. Use data-variant to select secondary or danger appearances without adding utility classes.

Inline Demo

Forms

Sat, 11 Apr 2026 00:00:00 +0000

All standard form elements are styled out of the box. Labels, inputs, selects, and textareas share consistent sizing and focus rings that respect the accent token.

Inline Demo

Callouts

Sat, 11 Apr 2026 00:00:00 +0000

Add data-callout="<type>" to any block element to style it as a callout. Four types are available: note, tip, warning, and error. No extra classes needed.

Inline Demo

Note — General information worth highlighting.

Tip — A helpful suggestion or best practice.

Warning — Something to watch out for.

Error — A critical issue or destructive action.

Navigation

Thu, 09 Apr 2026 00:00:00 +0000

ASW provides two navigation components for orientation and workflow sequencing: breadcrumb for hierarchical location, and steps for pipeline progress.

Shows the current page’s position in a site hierarchy. Uses <nav data-role="breadcrumb"> with a plain <ol> — no classes needed.

<nav data-role="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
    <li aria-current="page">Token System</li>
  </ol>
</nav>

Separators (/) are drawn by CSS ::before — no markup needed.
The current page item gets aria-current="page". It renders as plain text (no link), full colour, slightly bolder.
Wraps on narrow viewports.

Longer trail

<nav data-role="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
    <li><a href="/docs/components/">Components</a></li>
    <li aria-current="page">Navigation</li>
  </ol>
</nav>

Steps

A horizontal workflow sequence. Apply data-role="steps" to an <ol>. Each <li> takes a data-status attribute.

Dialog

Sat, 11 Apr 2026 00:00:00 +0000

ASW styles the native <dialog> element — no JavaScript modal libraries required. Call dialog.showModal() to open it. The ::backdrop pseudo-element receives a semi-transparent overlay automatically.

Inline Demo

Layouts

Thu, 09 Apr 2026 00:00:00 +0000

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

<div data-layout="docs">
  <aside>
    <nav data-nav="sidebar" aria-label="Docs">
      <small>Getting started</small>
      <ul>
        <li><a href="/docs/getting-started/introduction/" aria-current="page">Introduction</a></li>
        <li><a href="/docs/core/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.

Accordion & Dialog

Thu, 09 Apr 2026 00:00:00 +0000

Accordion

Style native <details>/<summary> elements. No JS needed — the browser handles open/close state.

<details>
  <summary>What is agentic HTML?</summary>
  <p>Agentic HTML is structured markup generated by AI agents — semantic, predictable, and styled without classes.</p>
</details>

Live example:

What is agentic HTML?

Agentic HTML is structured markup generated by AI agents — semantic, predictable, and styled without classes.

Why no classes?

Language models reliably produce semantic HTML. Class names require memorisation and drift. Data-attributes are explicit and grep-friendly.

Components on ASW — Agentic Semantic Web

Components

Callouts

Buttons

Inline Demo

Forms

Inline Demo

Callouts

Inline Demo

Navigation

Breadcrumb

Longer trail

Steps

Dialog

Inline Demo

Layouts

Docs layout

Accordion & Dialog

Accordion