Heading¶
The Heading widget is a title for a page or a part of a page. Unlike plain text, a heading has a level from 1 to 6, which tells browsers and screen readers how the page is organised. Use it for the page title at the top and for the title above each group of widgets, for example "Open invoices" above a table.
See also Text for body text and Section for a card with its own built-in title.
Using it¶
Drop a Heading onto the page, type the title into Text, and pick a Level. Use H1 once for the page title, H2 for the main parts of the page, and H3 and below for smaller groups. The title can include a value from the page, for example Orders for {$params.year}.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Text | Any text or template | Heading |
The heading text |
| Level | H1 – H6 | H2 | The heading's rank in the page outline |
| Text Align | Left · Center · Right | From theme | Where the heading sits horizontally |
| Style | Italic, plus one of Underline · Strikethrough · Overline | Off | Emphasis toggles |
| Text Color / Font Family / Font Size / Font Weight / Line Height | Theme values | From theme | Under Custom Style: the heading's typography |
| Text Transform / White Space / Letter Spacing | Theme values | From theme | Under Custom Style: further text settings |
| Custom Style | CSS | Empty | Extra styling for the heading |
| Box Style | Sizing and spacing | — | The box around the heading |
Tips¶
A few things to keep in mind:
- Pick the Level for structure, not for size. Screen readers and the browser's outline use it. If a heading looks too big or too small, change its size through Custom Style or the theme.
- For body or inline text, use Text.