v2.1.1

Heading

Stable

This component is considered stable. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/heading

npm @spark-web/heading

Source GitHub.com

Bundle unpkg.com

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.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Open in Playroom

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

return (
  <Stack gap="large">
    {headingLevels.map(headingLevel => (
      <Heading key={headingLevel} as="h4" level={headingLevel} tone="neutral">
        Heading level {headingLevel}
      </Heading>
    ))}
  </Stack>
);

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

return (
  <Stack gap="large">
    {headingLevels.map(headingLevel => (
      <Heading key={headingLevel} as="h4" level={headingLevel} tone="neutral">
        Heading level {headingLevel}
      </Heading>
    ))}
  </Stack>
);

Tone

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

Heading neutral

Heading primary

Open in Playroom

<Stack gap="large">
  <Heading level="1" tone="neutral">
    Heading neutral
  </Heading>
  <Heading level="1" tone="primary">
    Heading primary
  </Heading>
</Stack>

<Stack gap="large">
  <Heading level="1" tone="neutral">
    Heading neutral
  </Heading>
  <Heading level="1" tone="primary">
    Heading primary
  </Heading>
</Stack>

Alignment

Text can be aligned with the align prop.

Left (default)

Center

Right

Open in Playroom

<Stack gap="small" dividers>
  <Heading level="3" align="left">
    Left (default)
  </Heading>
  <Heading level="3" align="center">
    Center
  </Heading>
  <Heading level="3" align="right">
    Right
  </Heading>
</Stack>

<Stack gap="small" dividers>
  <Heading level="3" align="left">
    Left (default)
  </Heading>
  <Heading level="3" align="center">
    Center
  </Heading>
  <Heading level="3" align="right">
    Right
  </Heading>
</Stack>

Truncation

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

The quick brown fox jumps over the lazy

Open in Playroom

<Stack gap="large" style={{ width: 200 }}>
  <Heading level="3" truncate>
    The quick brown fox jumps over the lazy
  </Heading>
</Stack>

<Stack gap="large" style={{ width: 200 }}>
  <Heading level="3" truncate>
    The quick brown fox jumps over the lazy
  </Heading>
</Stack>

Contrast

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

This Heading is inverted to improve contrast.

Open in Playroom

<Box background="neutral" padding="large" borderRadius="small">
  <Heading level="3">This Heading is inverted to improve contrast.</Heading>
</Box>

<Box background="neutral" padding="large" borderRadius="small">
  <Heading level="3">This Heading is inverted to improve contrast.</Heading>
</Box>

Props

Prop	Type	Description
level	"1" \| "2" \| "3" \| "4"	The heading level.
align?	"left" \| "center" \| "right"	The horizontal alignment.
children?	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	The text content.
data?	DataAttributeMap	Sets data attributes on the component.
id?	string	An identifier which must be unique in the whole document.
tone?	"neutral" \| "muted" \| "primary"	The tone of the text.
truncate?	boolean	Truncate text to a single line.

Extra props are passed into the underlying Box component.