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.

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

import {Heading} from '@shopify/polaris';
import React from 'react';

function HeadingExample() {
  return <Heading>Online store dashboard</Heading>;
}

Props

Want to help make this feature better? Please share your feedback.

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

The element name to use for the heading.

Defaults to 'h2'.

children?React.ReactNode

The content to display inside the heading.

id?string

A unique identifier for the heading, used for reference in anchor links.

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

Headings should follow the content guidelines for headings 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 the element prop to determine the specific HTML element that’s output for the heading. The component defaults to a level 2 heading (<h2>). Use a different value for the element prop if a different heading fits the context better.

Learn more about writing helpful headings and subheadings.

Do

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

Don’t

Use headings for style alone.