Home

Heading

The heading component is a typographic device used to communicate levels of hierarchy between text.

Example

Heading

  • Text — For body copy.

Props

Size

Heading sizes influence more than just font-size to distinguish a clear visual pattern for users to follow.

We use T-shirt sizing to describe each "size", avoiding a direct correlation to the underlying HTML elements, which could otherwise make semantic definitions awkward.

Large

The "large" size is reserved for the title of a screen. There should be no more than one “large” heading per screen.

Large — The five boxing wizards jump quickly.

Medium

Only use "medium" sized headings for titling prominent interface elements, like empty-states and dialogs.

Medium — The five boxing wizards jump quickly.

Regular

Use "regular" headings for titling various sections within a screen.

Regular — The five boxing wizards jump quickly.

Small

Use the "small" heading size for subtitles.

Small — The five boxing wizards jump quickly.

Element type

If you need the semantic element to be different from the appearance, you can provide the desired HTML tag using the elementType prop.

This looks like an H2, but it’s actually a span.

By default, the semantic heading level is derived from the visual size, e.g. <Heading size="medium"> will render an h2 element:

large: h1
medium: h2
regular: h3
small: h4

Truncate

Limit the contents of the element to the specified number of lines, or provide a shorthand boolean to conveniently express a single line.

Only truncate user-generated content that may not fit within a particular layout. Learn more about how and when to truncate text in the typographic concepts guide.

A voussoir (/vuˈswɑːr/) is a wedge-shaped element, typically a stone, which is used in building an arch or vault. Although each unit in an arch or vault is a voussoir, two units are of distinct functional importance: the keystone and the springer. The keystone is the centre stone or masonry unit at the apex of an arch. The springer is the lowest voussoir on each side, located where the curve of the arch springs from the vertical support or abutment of the wall or pier.

© 2025 @jossmac