Subheading

Subheadings are used for the title of any sub-sections in top-level page sections. Generally, sections of a card use subheadings for their titles

Examples

Use to structure content in a card.

Drag to resize example

Props

children
React.ReactNode
Text to display in subheading
element
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
The element name to use for the subheading

Subheading in a card

Use to structure content in a card.

Subheading in a card

Subheading in a card

Use to structure content in a card.

Subheading in a card

Best practices

Subheadings should:

  • Be used to explain and clearly label logical groups in existing sections of a page
  • Not be used without a parent heading
  • Not be used in tables or list items, such as for the primary content in a resource list

Content guidelines

Subheadings should be:

  • Informative and descriptive: they should label the type of content grouped beneath them
  • Concise and scannable:
    • Use simple, clear language that can be read at a glance
    • Keep subheadings to single sentence and avoid using punctuation such as periods, commas, or semicolons
    • Write in sentence case (first word capitalized, the rest lowercase)
  • Shipping address

  • The package will be shipped to this address: