Content

Typography

Minium styles semantic text elements without requiring classes.

Usage

Choose each element by its meaning; Minium applies its default presentation.

Use headings and introductory text

Headings use the type scale automatically.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Use .eyebrow and .lead to structure introductory text.

Mineral note

Minium: red lead

Minium is the historic name for red lead, an orange-red lead oxide once used as a pigment.

Use hgroup to associate a heading with supporting text.

Dropdown API

Pure HTML patterns for menus, toolbars, and popovers.

Use lists

Use ul, ol, or dl to structure lists.

  • Unordered item
  • Another item
  • Nested list
    • Nested item
  1. Ordered item
  2. Another item
  3. Step with detail
Token
A reusable custom property.
Utility
A class that applies one focused behavior.

Use blockquotes

Use blockquote for quoted content.

Good typography lets readers focus on the content.
Design systems notes

Use inline text

Inline elements identify changes, annotations, and supporting details within a sentence.

  • Strong importance uses bold text.
  • Emphasis uses italic text.
  • Strong emphasis uses bold italic text.
  • This information is no longer relevant.
  • CSS controls the presentation of a document.
  • This text is highlighted for reference.
  • This sentence was added to the document.
  • This sentence is no longer current.
  • The chemical formula for water is H2O.
  • The area of the room is 20 m2.
  • Small text is small and muted.
  • 漢(kan)字(ji) includes a pronunciation annotation.

Use captions

figcaption and caption use small, muted, italic text.

Placeholder figure for a typography example.

Use horizontal rules

hr uses a muted horizontal divider style.

Paragraph before rule


Paragraph after rule

Footer