Use a heading at the start of a new page or section of content to explain the context.
4 heading sizes are used to create a typographic hierarchy
4X Large (H1) -
Small breakpoint
3X Large (H2) -
Small breakpoint
2X Large (H3) -
Small breakpoint
X Large (H4) -
Small breakpoint
Usage
Use a heading at the start of a new page or section of content.
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. Use display text to create oversized typographic sections.
Writing a heading
Content guidelines
- The title is usually the H1 and should describe the purpose and content of the pag
- Only use one H1 per page
- Front-load the heading to describe the situation
- Always use the correct heading level
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.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
v1+ |
Related
External links