Heading
The Heading component automatically infers the appropriate heading level based on the Section component, helping maintain proper document structure without manual specification.
Live demo
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
Overview
The Heading component automatically infers the appropriate heading level without manual specification. You use the Section component for each section of your page, and every Heading component in that Section will use the correct heading level based on nesting depth.
For visual styling of headings, see Type sets for available Carbon type tokens.
When to use
- Building reusable components that need different heading levels in different contexts
- Maintaining proper document structure across complex page layouts
- Simplifying heading level management in component libraries
When not to use
- For non-heading text elements
- When you need complete manual control over heading levels (use standard HTML headings instead)
Content
Writing effective headings
- Keep headings concise and descriptive (aim for 5-7 words)
- Use sentence case for consistency
- Avoid punctuation at the end
- Make headings scannable and informative
- Ensure headings accurately describe the content that follows
Overflow handling
For long heading text:
- Break into multiple lines naturally at word boundaries
- Maintain proper line height for readability
- Avoid truncation when possible—full context is important for accessibility
Best practices
- Always wrap Heading components in Section components
- Let automatic level inference handle hierarchy
- Use prop for semantic HTML (article, aside, nav)as
- Reserve prop for exceptional cases onlylevel
- Test heading structure with screen readers
- Ensure headings create a logical outline of your page
Related
Components
Elements
Feedback
Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.