@spark-web/heading

---
title: Heading
storybookPath: typography-heading--default
isExperimentalPackage: false
---

Constrained, purposeful heading styles as a component.

Level

Controls the size of the heading and maps to the appropriate heading element
(h1, h2, h3 or h4). The rendered element can be overridden with the as
prop.

``jsx live
const headingLevels = ['1', '2', '3', '4'];

return (

{headingLevels.map(headingLevel => (

Heading level {headingLevel}

))}

);
`

Tone

Headings can be either "neutral" or "primary".

`jsx live


Heading neutral


Heading primary


`

Alignment

Text can be aligned with the align prop.

`jsx live


Left (default)


Center


Right


`

Truncation

Truncate text to a single line using the truncate prop. Useful for displaying
user-generated content that may not fit within your layout.

`jsx live


The quick brown fox jumps over the lazy


`

Contrast

To ensure headings have sufficient contrast, when on a dark background the
foreground colour is inverted.

`jsx live

This Heading is inverted to improve contrast.

`

Props

Extra props are passed into the underlying Box` component.