Heading

Headings are used as the titles of each major section of a page in the interface. For example, card components generally use headings as their title.

Examples

Use for the title of each top-level page section.

Drag to resize example

Props

children
React.ReactNode
The content to display inside the heading
element
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
The element name to use for the heading

Typographic heading

Use for the title of each top-level page section.

Typographic heading

Typographic heading

Use for the title of each top-level page section.

Typographic heading

Best practices

Headings should:

  • Clearly describe the section of interface they refer to
  • Highlight the most important concept or piece of information merchants need to know
  • Sit at the top of the section of interface they’re referring to

Content guidelines

Heading

Headings should be:

  • Informative and descriptive:
    • They should label the type of content grouped in the interface below
  • Concise and scannable:
    • Use simple, clear language that can be read at a glance
    • Keep headings to single sentence and avoid using punctuation such as periods, commas, or semicolons
    • Avoid articles (the, a, an) in microcopy headings to keep content short and actionable
    • Write in sentence case (first word capitalized, the rest is lowercase)

Microcopy headings should be easy for merchants to scan and understand instantly.

  • Custom reports

  • These are your custom reports

Conversational headings for areas like empty states and home cards are the only cases where you should use articles.

  • Secure your account with two-step authentication

  • Two-step authentication