Sheet 02.09 / Components · Content

Facts

A two-column fact sheet: a line icon and a label, some of them links. Icons are 1.5px stroke in text-muted; labels in ink.

CLASSb-factsDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — factslive, on a 768 rail

home / about

Tokens, components, drawings

42 tokens as JSON MIT code, CC BY-NC docs Source on GitHub

Anatomy

Parts

Part	Class	Notes
Sheet	`.b-facts`	Two columns, one on phones.
Fact	`.b-fact`	Icon and label. As a link, the label gets a line-strong underline that turns ink on hover.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad b-facts">
      <div class="b-fact"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="18" height="13" rx="1"/><path d="M8 7V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M3 12h18"/></svg><span>Tokens, components, drawings</span></div>
      <a class="b-fact" href="#t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg><span>42 tokens as JSON</span></a>
      <a class="b-fact" href="#l"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></svg><span>MIT code, CC BY-NC docs</span></a>
      <a class="b-fact" href="#g"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="6" cy="18" r="2"/><circle cx="6" cy="6" r="2"/><circle cx="18" cy="8" r="2"/><path d="M6 8v8M18 10c0 4-6 3-10 7"/></svg><span>Source on GitHub</span></a>
    </div>
  </div>
</div>

Keep each fact to a few words.
Link the facts that go somewhere; leave the rest plain.

Don't

Use filled or coloured icons.
Write a sentence in a fact.