Layouts / Covers & specimens
Publication
Reusable covers, navigation, section headings, and frames for live examples.
Basic usage
DOC-UI / PUBLICATION
Information, made clear.
A design system for documentation and reports.
HTML
<section class="cover">
<div><p class="eyebrow">DOC-UI / PUBLICATION</p>
<h2 class="cover-title">Information, made clear.</h2></div>
<div class="cover-copy"><p>A design system for documentation and reports.</p>
<div class="actions"><a class="btn btn-primary btn-lg" href="../../start/">Get started →</a></div></div>
</section>A labeled example
✓ Analysis complete
HTML
<figure class="specimen">
<div class="specimen-bar">EXAMPLE / Status</div>
<div class="specimen-body"><span class="chip tone-ok">✓ Analysis complete</span></div>
<figcaption class="specimen-caption">State is expressed in both color and words.</figcaption>
</figure>Section headings
01 / READING ORDER
Scan a reference. Read a report.
A point, its evidence, its meaning.
HTML
<section class="section">
<div class="section-head">
<p class="eyebrow">01 / READING ORDER</p>
<div><h2 class="section-title">Scan a reference. Read a report.</h2>
<p class="note">A point, its evidence, its meaning.</p></div>
</div>
</section>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.cover / .cover-title / .cover-copy | The cover headline and supporting text. Stacks when the container narrows. |
.masthead / .brand / .colophon | Publication header, typographic wordmark, and footer. |
.section / .section-head / .section-title | Section separator and heading. |
.specimen / .specimen-bar / .specimen-body / .specimen-caption | A live example, its label, content, and caption. |
.principles / .principle / .ribbon | Ruled arrangements for principles and short facts. |
.index-nav / .link-list | An unboxed category index, or a wrapping list of plain links. |
Usage notes
These are public doc-ui components, used by doc-site itself. Reuse the same markup in a guide, report, or product page.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.