Components
Heading
Heading is used to structure content and create hierarchy on a page.
React
const PreviewEn = () => { return <Heading>This is a heading</Heading>; }; render(<PreviewEn />)
Heading is a typography component used to display text in different sizes and styles. Use it for page titles, section headers, and subheadings. Headings are designed to stand out from body text, create visual hierarchy, and help readers quickly understand the structure of the content.
Example
Sizes
React
const Sizes = () => ( <> <Heading data-size='2xl' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a 2xl heading </Heading> <Heading data-size='xl' style={{ marginBottom: 'var(--ds-size-4)' }}> This is an xl heading </Heading> <Heading data-size='lg' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a lg heading </Heading> <Heading data-size='md' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a md heading </Heading> <Heading data-size='sm' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a sm heading </Heading> <Heading data-size='xs' style={{ marginBottom: 'var(--ds-size-4)' }}> This is an xs heading </Heading> <Heading data-size='2xs' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a 2xs heading </Heading> </> ); render(<Sizes />)
Guidelines
Heading is used to establish structure and hierarchy in content. Use headings to divide information into clear, logical sections. Make sure to use correct heading levels (h1-h6) to ensure proper semantic structure.
Text
Headings and subheadings should be short and clear, giving readers an accurate idea of the content they introduce. Starting headings with keywords makes it easier for everyone to scan the page and locate relevant information.
The main page heading — the <h1> element — must describe the entire page, while each subheading should be unique and clearly indicate what the following section contains.