Typography

A Go template renders text with a class rather than a bare element, so the design-system font applies without Home-UI restyling the host’s page. None of these touch a bare <h1> or <p>: they are opt-in, so they cannot collide with the host’s own CSS.

These are not components. They are the rules that make ordinary prose look like the rest of the library, and they carry no markup contract beyond the element you put them on.

Prose

.hui-prose sets the rhythm for a block of text; the individual classes work on their own as well, which is what a server rendering one paragraph at a time usually needs.

The full type scale and the font tokens are on Typography. To highlight a run of text inside prose, see Mark.

.hui-blockquote

A left-bordered quote.

.hui-code

Inline monospace on a muted fill.

.hui-h1

Heading level 1 size.

.hui-h2

Heading level 2 size.

.hui-h3

Heading level 3 size.

.hui-h4

Heading level 4 size.

.hui-lead

A larger, muted intro paragraph.

.hui-link

A primary-coloured text link.

.hui-list

A list with left padding and a bottom margin.

.hui-muted

Small, muted text.

.hui-p

A paragraph with a bottom margin.

.hui-prose

Body defaults for a block of host-rendered text.

<div class="hui-prose">
  <p class="hui-p">…</p>
</div>