Heading

import { Heading } from 'yarcl';

<Heading level={n}> renders an <hn> styled with the text style your config maps to that level in typography.headings.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

<Heading level={1}>Settings</Heading>
<Heading level={2}>Profile</Heading>

Overriding the look

Choose the level by document structure, not by size. When a heading should look different, override textStyle and keep the right level:

An h2 that looks like display

An h1 that looks like subheading

<Heading level={2} textStyle="display">An h2 that looks like display</Heading>

Props

Prop	Type	Default	Description
level required	1 | 2 | 3 | 4 | 5 | 6		Heading level: renders <h1> … <h6>. Choose by document structure, not by size.
color	Colorconfig		Semantic color, from the colors config. Uses the default text color when omitted.
textStyle	TextStyleconfig	config.typography.headings[`h${level}`]	Text style, from the typography.styles config. Overrides the level's style when the visual size should differ from the document structure.