Chip
Labels for kinds and states.
Lists & data / Ways into content
Card
Show where a route leads and what a reader can learn there.
Basic usage
Table
Which statements read from or write to each table.
Symbols
Classes and functions, their signatures and callers.
HTML
<div class="cards">
<section class="card"><h3>Table</h3>
<p class="card-description">Which statements read from or write to each table.</p>
<p class="card-more"><a href="../table/">Explore 12 tables →</a></p></section>
<section class="card"><h3>Symbols</h3>
<p class="card-description">Classes and functions, their signatures and callers.</p>
<p class="card-more"><a href="../symbol/">Explore API references →</a></p></section>
</div>A visual preview
HTML
<article class="card">
<div class="card-preview doc doc-inset" style="--dd-preview-height: auto" inert aria-hidden="true">
<div class="chips">
<span class="chip tone-blue">SELECT</span>
<span class="chip tone-violet">INSERT</span>
<span class="chip tone-teal">UPDATE</span>
</div>
</div>
<h3><a class="card-link" href="../chip/">Chip</a></h3>
<p class="card-description">Labels for kinds and states.</p>
</article>A light and dark palette pair
Linen / Teal
Light
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
Dark
978findings
SELECTINSERTUPDATE
✓ Resolved! Partial? Unresolved
HTML
<article class="card">
<h3 translate="no">Linen / Teal</h3>
<div class="palette-pair">
<div class="palette-sample" data-dd-palette="linen-teal" data-dd-theme="light">
<span class="cap">Light</span>
<div class="stat tone-accent"><b class="stat-fig">978</b><span class="stat-label">findings</span></div>
<div class="chips" aria-label="Kinds"><span class="chip chip-sm tone-blue">SELECT</span><span class="chip chip-sm tone-violet">INSERT</span><span class="chip chip-sm tone-teal">UPDATE</span></div>
<div class="chips" aria-label="States"><span class="chip chip-sm tone-ok">✓ Resolved</span><span class="chip chip-sm tone-warn">! Partial</span><span class="chip chip-sm tone-danger">? Unresolved</span></div>
</div>
<div class="palette-sample" data-dd-palette="linen-teal" data-dd-theme="dark">
<span class="cap">Dark</span>
<div class="stat tone-accent"><b class="stat-fig">978</b><span class="stat-label">findings</span></div>
<div class="chips" aria-label="Kinds"><span class="chip chip-sm tone-blue">SELECT</span><span class="chip chip-sm tone-violet">INSERT</span><span class="chip chip-sm tone-teal">UPDATE</span></div>
<div class="chips" aria-label="States"><span class="chip chip-sm tone-ok">✓ Resolved</span><span class="chip chip-sm tone-warn">! Partial</span><span class="chip chip-sm tone-danger">? Unresolved</span></div>
</div>
</div>
</article>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.cards / .card | A list and its entries, arranged in one or two columns according to the container. |
.card-preview | A bounded live preview. Use inert and aria-hidden when the card title provides the accessible description. |
--dd-preview-height | Defaults to 224px. Use auto for a selected preview that needs to keep all text and controls visible; retain normal type sizes. |
.card-link | Stretches the title link across a preview card; its preview must not contain interactive controls. |
.card-description | What this destination can tell the reader. |
.card-more | A detail link aligned at the bottom. |
.aside | A supporting region with a quiet background. |
.palette-pair / .palette-sample | Paired light/dark specimens at normal reading sizes. Load document-design.palettes.css after the base CSS and set data-dd-palette and data-dd-theme on each sample. |
Usage notes
A rule separates routes without turning every item into a box. Give comparable routes comparable descriptions.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.