Sheet 02.23 / Components · Controls

Link

An inline link with a dotted underline, and the muted see-all link with an arrow. Dotted at rest, solid on hover.

CLASSb-linkDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — linklive, from bundle.css

controls

Every value comes from tokens.json. All notes

Anatomy

Parts

Part	Class	Notes
Inline	`.b-link`	Ink, dotted underline, solid on hover.
More	`.b-more`	text-muted, ends with an arrow.

Markup

Code

bundle.css

<div style="display:flex;gap:24px;align-items:center;flex-wrap:wrap">
  <span>Every value comes from <a class="b-link" href="#t">tokens.json</a>.</span>
  <a class="b-more" href="#a">All notes</a>
</div>

Link the words that name the destination.
Use b-more only at the end of a section.

Don't

Write click here.
Colour links blue.