- Use a heading at the start of a new page or section of content.
- A heading can have any level from H1 to H6.
- Every page should have a unique H1, and each heading level should relate to all the headings above it. The higher the number, the more detail on the topic you should be going into.
- Don't use headings to create oversized body text within a section of content. Headings are used to create a hierarchy in a page layout which can be disrupted when headings are used to create oversized body text.
- If you need to change the size of the heading, use a different class to style it rather than changing the heading level itself.
Content guidelines
- The title is usually the H1 and should describe the purpose and content of the page
- Only use one H1 per page
- Front-load the heading to describe the situation
- Always use the correct heading levels
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
How to use it
Choosing a size
We have four sizes of heading, numbered 1-4
Customising the semantic element
Our heading components default to the semantic level of their number, e.g. Heading 1 is an <h1> element. You can customise this to fit the context of the page by using the as prop from styled components
Adding related content
Heading components must always be followed by related content, or a heading component that is one level higher. For example, a heading level 2 element could be followed by a heading level 3 element.
Headings should not be used for listing information, or as the sole content in a card component, unless there is related content that follows it.
Properties
|
Name |
Values |
Default |
|---|---|---|
|
inverted (Web only) |
boolean |
false |
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone using the component, I want to be able to understand the content within a section from the heading alone, so that I don't have to read through the entire section in order to find what I'm looking for.
- As a screen reader user, I want to be able to know the content that I may find on the page from scanning through the list of headings present.
- As a screen reader user, I want to be able to know the structure of the content based on the hierarchy of the heading levels present.
Test steps
Use these steps to check that the heading component has been implemented correctly:
- Turn on a screen reader.
- Navigate through the page and check that content which appears visually as a heading is announced as such.
- Verify that the hierarchy of the page makes sense, with headings nested appropriately.
- Verify that the headings are sufficiently descriptive, providing context to the content following them.