Heading

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

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

Latest transaction

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

Successful transactions

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

Transaction fees

h5
Use for headings that are sub-sections of any h4 headings.
Transaction fees explained
h6
Use for headings that are sub-sections of any h5 headings.
How are transaction fees calculated?

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptionalnone
asoptional
'h3'
fontSizeoptional
4
Styled System Props
Heading uses COMMON, TYPOGRAHY groups of Styed 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.
Avoid articles to keep headings succinct
Don’t use articles (a, the, an) in headings. This will make them shorter and quicker to scan.
Do

Add wallet

Don't

Add a wallet

Front load headings
Make sure the subject of your heading is put first and foremost in your copy – this will make it easier to scan and understand at a glance.
Do

Withdraw ETH?

Don't

Are you sure?

  • Text – For regular text where you can control font size, weight, alignment, and color.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute