Ludo
502b2e8266
Navigation: Docs, Layouts, Lab (simplified from 6 items) Layouts gallery: card grid showing all available page layouts with live links to demo pages. Docs restructure: 8 auto-generated sidebar sections (Getting Started, Typography, Core, Content, Components, Reference, Vault, Packs) with 20 new stub pages. Each stub has inline HTML demos that ASW styles directly. New Hugo layout template for layouts/ section. Decap CMS nav updated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
22 lines
936 B
Markdown
22 lines
936 B
Markdown
---
|
|
title: "Utilities"
|
|
description: "Utility data-attributes in ASW for text variants, spacing, and display."
|
|
type: docs
|
|
weight: 43
|
|
date: 2026-04-11
|
|
tags: ["reference", "utilities", "data-attributes"]
|
|
ai-disclosure: "generated"
|
|
ai-model: "claude-sonnet-4-6"
|
|
ai-provider: "Anthropic"
|
|
---
|
|
|
|
ASW provides a small set of utility attributes for inline adjustments. Rather than class names, these use `data-*` attributes to stay in the semantic-HTML spirit of the framework.
|
|
|
|
## Inline Demo
|
|
|
|
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
|
|
<p><span data-text="mono">data-text="mono"</span> — monospace font</p>
|
|
<p><span data-text="dim">data-text="dim"</span> — reduced opacity / muted</p>
|
|
<p><span data-text="accent">data-text="accent"</span> — accent colour</p>
|
|
<p><span data-text="small">data-text="small"</span> — smaller font size</p>
|
|
</div>
|