Text
Body text sits at the base size and line height, inside a comfortable measure. Inline elements cover emphasis, edits, abbreviations, and numbers.
Body text includes strong text, emphasis, small print, highlighted text, an abbreviation like CSS, and notation such as E = mc2 and H2O without stretching the line.
Edits show as removed text and inserted text. Figures in
and 1,180 items use tabular
numbers, so digits line up.
Accessibility
Paragraphs wrap to avoid a lone last word. ins and del keep their underline and
strikethrough, so they don't rely on color.
Customize
--m-font-sans, --m-font-size, and --m-measure shape body text.
Headings
The top three levels scale with the window. Long headings wrap in balanced lines.
Heading level one
Heading level two
Heading level three
Heading level four
Heading level five
Heading level six
A much longer heading that wraps onto a second line to show balanced wrapping
A linked heading keeps the heading color
Accessibility
Use levels in order. Pick a heading for its level in the outline, not for its size.
Customize
--m-density sets the space above and below headings.
Heading groups
In an hgroup, a paragraph before the heading is an eyebrow, and a paragraph after it is a
subtitle.
Eyebrow
A heading group
A muted subtitle that sits right under its heading.
Accessibility
An hgroup holds exactly one heading, so the eyebrow and subtitle stay paragraphs.
Customize
The eyebrow and subtitle use the muted text color.
Lists
Bulleted, numbered, and description lists, plus menu for a row of commands.
- Unordered list item
-
Item with a nested list
- Nested item one
- Nested item two
- Last unordered item
- First step
- Second step
- Third step
- Density
- Scales every spacing token.
- Primary
- The single accent color every interactive state derives from.
Accessibility
Numbered lists use tabular numbers, so the items line up.
Customize
--m-density sets the space between items.
Quotes
A blockquote gets an accent border. A footer inside it is an attribution, and inline
q adds quotation marks.
Simplicity is prerequisite for reliability.
“A quote that opens with punctuation lets the mark hang outside the text edge where supported.”
An inline quote reads like this short quoted phrase
within a sentence.
Accessibility
The em dash before a quote's footer is drawn with CSS and isn't read aloud.
Customize
The border uses --m-primary.
Code
Inline code, keyboard keys, sample output, variables, and preformatted blocks that scroll sideways.
Inline code, keyboard input like Ctrl + C, sample output
Build succeeded, and a variable x.
:root {
--m-primary: oklch(55% 0.19 40);
--m-density: 1;
}Accessibility
Give a pre that can scroll a tabindex="0", so keyboard users can scroll it.
Customize
--m-font-mono sets the code font.