Use the Heading component to give users scannable titles on your interface. A user should be able to understand what a page is for just by reading the headings. This components extends the Text component to provide default heading styles for H1-H6.

Import component

import { Heading } from 'rimble-ui';

Examples

Different ways to use the Heading component.

h1

Use for page or screen titles.

Transactions
<Heading as={"h1"}>Transactions</Heading>
<Heading as={"h1"}>Transactions</Heading>
Copy code

h2

Use for headings that are sub-sections of the h1 heading.

Latest transaction
<Heading as={"h2"}>Latest transaction</Heading>
<Heading as={"h2"}>Latest transaction</Heading>
Copy code

h3

Use for headings that are sub-sections of an h2 heading.

Successful transactions
<Heading as={"h3"}>Successful transactions</Heading>
<Heading as={"h3"}>Successful transactions</Heading>
Copy code

h4

Use for headings that are sub-sections of any h3 headings.

Transaction fees
<Heading as={"h4"}>Transaction fees</Heading>
<Heading as={"h4"}>Transaction fees</Heading>
Copy code

h5

Use for headings that are sub-sections of any h4 headings.

Transaction fees explained
<Heading as={"h5"}>Transaction fees explained</Heading>
<Heading as={"h5"}>Transaction fees explained</Heading>
Copy code

h6

Use for headings that are sub-sections of any h5 headings.

How are transaction fees calculated?
<Heading as={"h6"}>How are transaction fees calculated?</Heading>
<Heading as={"h6"}>How are transaction fees calculated?</Heading>
Copy code

Props

'h2'

''

Styled System Props

Heading uses COMMON, TYPOGRAPHY groups of Styled System props.

Design guidelines

Some best practices for using Heading in your product.

• Only use one h1 per page
• Headings should explain the content below
• Keep headings short for scannability
• Headings should appear at the top of the section of the interface they're introducing

Content

Some best practices for writing Heading components.

Content guidelines evidence

Avoid articles to keep headings succinct

Front load headings

Related components

• Text – For regular text where you can control font size, weight, alignment, and color.