Heading
Heading displays a page or section heading. Its HTML heading level describes the content hierarchy, while its Design controls determine the visual size and typography.
Add and configure Heading
- Click Add, choose Heading, and place it in the container.
- Under Content > Content, replace Text with your heading.
- Choose Tags to match the heading's place in the page: h1 through h6.
- Set Design > Size, Typography, and Spacing.
- Save your changes.
This element has no children; use its own controls.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Content > Content
| Setting | Purpose and options | Behavior |
|---|---|---|
| Text | Visible text. | Shared |
| Tags | h1, h2, h3, h4, h5, h6. | Shared |
Design > Size
| Setting | Purpose and options | Behavior |
|---|---|---|
| Width | Width. | Responsive |
Design > Typography
| Setting | Purpose and options | Behavior |
|---|---|---|
| Typography | typography controls. | See linked controls |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Spacing | spacing controls. | See linked controls |
Troubleshooting
The heading level changed but the text is still the wrong size
Set the visual size under Typography. Choose the HTML heading level for the document structure.
A long heading overflows
Check width, typography, and responsive font sizes. Test the longest expected text rather than only the short sample.