Layouts / Figures & annotations
Composition
Keep a figure, its caption, and the notes that explain it in one reading order.
A comparison with a width container
Statements
The WordPress catalog contains 844 statements.
Findings
978 findings may overlap within those statements.
<div class="field">
<div class="compare">
<div><h3 class="compare-title">Statements</h3><p class="note">The WordPress catalog contains 844 statements.</p></div>
<div><h3 class="compare-title">Findings</h3><p class="note">978 findings may overlap within those statements.</p></div>
</div>
</div>A figure and its explanation
B Report
- QuestionOrient the reader
- EvidenceConnect the facts
- MeaningExplain the result
Figure 1.A report gives a point, its evidence, and its meaning a clear reading order.
Arrows show a reading sequence, not a causal relationship.
<figure class="plate plate-full plate-side plate-unnumbered">
<div class="plate-body">
<h3 class="compare-title"><span class="ref ref-mark tone-teal">B</span> Report</h3>
<ol class="flow tone-teal">
<li><span class="flow-mark" aria-hidden="true">01</span><strong class="flow-name">Question</strong><span class="flow-detail">Orient the reader</span></li>
<li><span class="flow-mark" aria-hidden="true">02</span><strong class="flow-name">Evidence</strong><span class="flow-detail">Connect the facts</span></li>
<li><span class="flow-mark" aria-hidden="true">03</span><strong class="flow-name">Meaning</strong><span class="flow-detail">Explain the result</span></li>
</ol>
</div>
<figcaption>
<p class="plate-summary"><span class="plate-label">Figure 1.</span>A report gives a point, its evidence, and its meaning a clear reading order.</p>
<p class="sidenote">Arrows show a reading sequence, not a causal relationship.</p>
</figcaption>
</figure>A semantic page wrapper
<div class="sheet sheet-wide">
<header class="masthead">Publication name</header>
<main class="sheet-body">
<header class="cover"><div><h1 class="cover-title">The main idea.</h1></div></header>
<section class="sec">
<h2 class="label">CONTEXT</h2>
<div class="field">The explanation follows.</div>
</section>
</main>
<footer class="colophon">Sources and credits</footer>
</div>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.plate / .plate-wide / .plate-full | A numbered semantic figure at text, wide, or full column width. |
.plate-unnumbered | Use an explicit figure number when the generator also writes cross-references. |
.plate-side / .plate-summary / .sidenote | A caption with an adjacent note; the note follows the caption in narrow columns. |
.plate-body / .plate-label / .plate-source | The ruled figure body, an explicit number, and source or conditions. |
.compare / .compare-title / .compare-draw | Text comparisons use two equal columns at a nearest size-container width of 46rem (736px with a 16px root) or more. Use a .field, .content, or .sheet ancestor. Below that, or without a size container, they stack. .compare-draw instead wraps fixed-width drawings when they no longer fit. |
.flow / .flow-mark / .flow-name / .flow-detail | A three-stage sequence: ordinal, name, then explanation. Arrows indicate reading order. |
.ref / .ref-mark | A reference to a figure: .ref carries its number, .ref ref-mark a letter-and-colour identity shared by a passage and its panel. |
.sheet-body | Preserves a sheet’s column grid through a semantic main or article wrapper. |
Usage notes
Keep captions and notes in the HTML. A letter or label must carry the same meaning wherever it appears. Use ordered lists for sequences; the arrows here mean reading order, not causality. A plate can also contain a table or SVG. Use the draw classes for SVG text and marks, and a draw-wrap when the diagram must scroll without shrinking labels.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.