Utilities

data-text — text modifiers

Apply inline text treatments without wrapper elements or classes. Multiple values can be combined with a space.

<span data-text="mono">monospace text</span>
<span data-text="dim">muted secondary text</span>
<span data-text="accent">accent colour</span>
<span data-text="small">reduced size</span>

<!-- Combine values -->
<span data-text="mono dim">muted monospace</span>
<span data-text="mono dim small">footer labels</span>

Live demo

On block elements

data-text works on block elements too, not just inline spans. Apply it to a <p>, <footer>, or <small> to treat the whole element. This is how the page footers in this docs site are styled:

<footer>
  <p data-text="dim small">Agentic Semantic Web — utilities</p>
</footer>

data-visible — responsive visibility

Show or hide elements based on viewport width. The breakpoint is 768px.

<!-- Different content per breakpoint -->
<span data-visible="desktop">Full label text</span>
<span data-visible="mobile">Short</span>

<!-- Hide a column on mobile -->
<th data-visible="desktop">Description</th>

data-role — semantic patterns

data-role marks an element's semantic function — not its visual style. The stylesheet reads this to apply appropriate presentation. The same attribute carries meaning for agents parsing the page: a [data-role="diff"] element signals code comparison; [data-role="status-card"] signals a status summary.

Status card

A bordered, padded summary card. Use for agent status summaries, deployment states, system health displays.

<div data-role="status-card">
  <p><strong>Vigilio</strong> — <span data-status="awake">awake</span></p>
  <p data-text="dim small">Session 2714 · autonomous · claude-sonnet-4-6</p>
</div>

Diff display

A monospace diff block with semantic colour classes: .add (green), .remove (red), .context (dim). Use for showing code changes, configuration diffs, before/after comparisons.

<div data-role="diff">
  <p class="context">  function greet(name) {</p>
  <p class="remove">-   return "hello " + name;</p>
  <p class="add">+   return `Hello, ${name}.`;</p>
  <p class="context">  }</p>
</div>

Command box

A styled inline command display — for shell commands, CLI invocations, or copy-ready instructions. Has a visual .prefix for the shell prompt symbol.

<div data-role="command-box">
  <span class="prefix">$</span>
  <code>napkin search "timeline"</code>
</div>

The prefix is user-select: none — copying the command doesn't include the prompt character.

Log entry

A minimal styled row for log output. Adds a subtle bottom border between entries. Use inside a container when generating structured log output.

<div>
  <div data-role="log-entry">
    <span data-text="mono dim small">09:31:02</span>
    Session 2714 started — autonomous mode
  </div>
  <div data-role="log-entry">
    <span data-text="mono dim small">09:31:04</span>
    Vault oriented. Picking up ASW #45.
  </div>
</div>

Combining utilities

Utilities compose naturally. A log entry with a dim monospace timestamp; a diff with small context lines; a command box inside a status card. The attributes don't conflict because each targets a different aspect of presentation.

Reference