Any semantic content goes here — an <article> is a card.
Browse documentation
On this page
Examples
Three interfaces composed entirely from the same components documented
throughout this site — real markup, the default and scoped builds, and
the live theme toggle in the header for light and dark mode. Every block
below is rendered by the actual cirth.min.css this site loads; "Show
HTML" opens the exact source.
One interface, four real builds.
Each frame is isolated from the documentation shell and loads a stylesheet compiled directly from src/. No preview overrides are applied.
cirth.min.csscirth.classless.min.csscirth.scoped.min.csscirth.classless.scoped.min.cssDocumentation #
A docs-style layout: landmark regions, a vertical nav, prose, and a data table — the layout primitives most content sites need, no components beyond them. Default build.
Header
body > header, body > main, and
body > footer each get vertical block spacing automatically.
Show HTML
<header>
<h3>Header</h3>
</header>
<main>
<p><code>body > header</code>, <code>body > main</code>, and
<code>body > footer</code> each get vertical block spacing automatically.</p>
</main>
<footer>
<small>Footer</small>
</footer>Show HTML
<aside>
<nav>
<ul>
<li><a href="#" aria-current="page">Overview</a></li>
<li><a href="#">Get Started</a></li>
<li><a href="#">Customization</a></li>
</ul>
</nav>
</aside>| # | Name | Role |
|---|---|---|
| 1 | Alex Doe | Engineer |
| 2 | Sam Ray | Designer |
| 3 | Jo Park | Manager |
Show HTML
<table class="striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Alex Doe</td>
<td>Engineer</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Sam Ray</td>
<td>Designer</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jo Park</td>
<td>Manager</td>
</tr>
</tbody>
</table>Dashboard #
Cards, a striped table, progress indicators, and a busy state for an
internal tool. Default build, retheming shown live: the button and link
below override --cirth-primary and --cirth-border-radius in seven
lines of plain CSS, with no rebuild.
Show HTML
<article>
<header>
<strong>Card header</strong>
</header>
<p>Any semantic content goes here — an <code><article></code> is a card.</p>
<footer>
<button type="button">Action</button>
</footer>
</article>Show HTML
<label id="demo-file-upload-label" for="demo-file-upload-progress">File upload</label>
<progress id="demo-file-upload-progress" aria-labelledby="demo-file-upload-label" value="25" max="100">25%</progress>
<label id="demo-data-import-label" for="demo-data-import-progress">Data import</label>
<progress id="demo-data-import-progress" aria-labelledby="demo-data-import-label" value="75" max="100">75%</progress>
<label id="demo-loading-results-label" for="demo-loading-results-progress">Loading results</label>
<progress id="demo-loading-results-progress" aria-labelledby="demo-loading-results-label"></progress>Loading data…
Show HTML
<button type="button" aria-busy="true" disabled>Loading…</button>
<button type="button" aria-busy="true" aria-label="Loading" class="secondary" disabled></button>
<p aria-busy="true">Loading data…</p>Show HTML
<style>
/* Two declarations, because the accent is an input: the fill, the hover,
the focus ring and the underline tint all derive from --cirth-primary.
The pair covers both schemes at once — light-dark() is resolved where
the token is used, so this holds inside a forced-scheme subtree too.
The light half is darker than a naive rose (#e11d48 measures 4.36:1 on
the page surface, below AA) because it has to read as text, not only
as a fill. */
.demo-brand {
--cirth-primary: light-dark(#c81e42, #fb7185);
--cirth-border-radius: 9999px;
}
</style>
<div class="demo-brand">
<button type="button">Custom primary</button>
<button type="button" class="outline">Outline</button>
<button type="button" class="ghost">Ghost</button>
<p><a href="#">A link picks up the same override.</a></p>
</div>Settings form #
Form controls, validation states, and a checkbox/radio/switch set —
the pieces of a settings page. Default build; the callout shows the same
idea wrapped for the scoped build, which styles only what's inside a
.cirth container so it can sit inside an existing app shell without
leaking.
Show HTML
<form>
<fieldset>
<label>
Full name
<input type="text" name="name" placeholder="Ada Lovelace" autocomplete="name">
</label>
<label>
Role
<select name="role" required>
<option value="" selected disabled>Select…</option>
<option>Engineer</option>
<option>Designer</option>
<option>Manager</option>
</select>
</label>
<label>
Bio
<textarea name="bio" placeholder="A short bio"></textarea>
<small>Optional, shown on your public profile.</small>
</label>
</fieldset>
<button type="submit">Submit</button>
</form>Show HTML
<form>
<label>
Valid email
<input type="email" value="ada@example.com" aria-invalid="false">
<small>Looks good.</small>
</label>
<label>
Invalid email
<input type="email" value="not-an-email" aria-invalid="true">
<small>Enter a valid email address.</small>
</label>
<label>
Disabled field
<input type="text" value="Read only" disabled>
</label>
<div class="grid" data-readonly-number-example>
<label>
Editable quantity
<input type="number" value="3" min="0" max="10">
</label>
<label>
Readonly quantity
<input type="number" value="3" min="0" max="10" readonly>
</label>
</div>
</form>Show HTML
<fieldset>
<legend>Checkboxes</legend>
<label>
<input type="checkbox" name="opt" checked>
Checked
</label>
<label>
<input type="checkbox" name="opt">
Unchecked
</label>
</fieldset>
<fieldset>
<legend>Radios</legend>
<label>
<input type="radio" name="radio" value="a" checked>
Option A
</label>
<label>
<input type="radio" name="radio" value="b">
Option B
</label>
</fieldset>
<fieldset>
<legend>Switch</legend>
<label>
<input type="checkbox" role="switch" checked>
Enable notifications
</label>
</fieldset>Scoped markup boundary, .cirth wrapper (the isolated scoped build is shown
in Fig. E01 above; this inline source stays inside the site-wide default
build):
Embedded widget
Everything inside .cirth is styled. Everything outside it is untouched.
Show HTML
<div class="cirth">
<article>
<h3>Embedded widget</h3>
<p>Everything inside <code>.cirth</code> is styled. Everything outside it is untouched.</p>
<button type="button">Save</button>
</article>
</div>More components #
Every layout primitive, form control, and component has its own live demo with full HTML source on its documentation page — see Layout, Forms, and Components — and Get Started walks through a complete starter document build by build.