Skip to content Shopify logo Polaris

Subheading

Subheadings are used for the title of any sub-sections in top-level page sections.

Used for the title of any sub-sections in top-level page sections.

import{Subheading}from'@shopify/polaris';importReactfrom'react';functionExample(){return<Subheading>Accounts</Subheading>;}

Props

Want to help make this feature better? Pleaseshare your feedback.

interface SubheadingProps
element? 'h1'|'h2'|'h3'|'h4'|'h5'|'h6'|'p'

The element name to use for the subheading.

Defaults to'h3'.
children? React.ReactNode

Text to display in subheading.

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 aresource list

Content guidelines

Subheadings should follow the content guidelines forheadings and subheadings.

Accessibility

A clear and consistent heading structure helps merchants who have difficulty with reading or language. It also helps screen reader users to navigate the page using keystrokes that are custom to their screen reader.

Use theelementprop to determine the specific HTML element that’s output for the subheading. The component defaults to a level 3 heading (

). Use a different value for theelementprop if a different subheading fits the context better.

Learn more about writing helpfulheadings and subheadings.

Do

Use subheadings to support the hierarchy and structure of the page.

Don’t

  • Use subheadings for style alone.
  • Use subheadings for major sections of the page.