--- title: Heading storybookPath: typography-heading--default isExperimentalPackage: false ---
npm install @spark-web/heading---
title: Heading
storybookPath: typography-heading--default
isExperimentalPackage: false
---
Constrained, purposeful heading styles as a component.
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}
))}
);
`
Headings can be either "neutral" or "primary".
`jsx live`
Heading neutral
Heading primary
Text can be aligned with the align prop.
`jsx live`
Left (default)
Center
Right
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
To ensure headings have sufficient contrast, when on a dark background the
foreground colour is inverted.
`jsx live`
Extra props are passed into the underlying Box` component.