Title

A single heading in a full-width band with nothing else in it. It exists so a heading can be a section in its own right — a title that introduces the several sections that follow, rather than belonging to any one of them.

Most sections already carry their own heading. Reach for this one only when the heading needs to sit above a group: “Our Ingredients” over three ingredient bands, “How it works” over a run of feature grids.

Settings

Setting	What it does
Section ID	Optional anchor, so a link elsewhere on the page can jump here. Must be unique on the page and written in handle format (our-ingredients, not Our Ingredients).
Top / Bottom padding (mobile)	Space above and below the heading on phones. 0–10rem in 0.5 steps, default 3rem.
Top / Bottom padding (tablet)	The same for tablet. Default 3rem.
Top / Bottom padding (desktop)	The same for desktop. 0–8rem, default 7rem.

There is no colour or background setting. The band is transparent and the heading takes the text colour of the page.

Blocks

One fixed Title block, always present. It can’t be removed, reordered, or joined by anything else — the heading text and its appearance are all edited on that block:

Setting	What it does
Title	The heading text. Type // where you want a line break.
Heading Level	H1 through H6. Default H2.
Mobile style	The size and weight on phones. Default Heading LG. Choose None to inherit whatever the surrounding page uses.
Tablet style	The same for tablet. None — the default — follows the mobile style.
Desktop style	The same for desktop. None — the default — follows the tablet style.
Text alignment (mobile)	Left, Center or Right on phones. None follows the page.
Text alignment	The same for larger screens. None follows the mobile setting.

Size and heading level are separate on purpose

Heading Level is about the page’s structure — it tells search engines and screen readers how this heading relates to the ones around it. The style settings control how big it looks.

Set the level to whatever follows correctly from the heading above it (one H1 per page, and never skip a level), then use the style settings to get the size you want. Choosing H3 because it “looks right” is a structural mistake even when it renders correctly.

Set only the breakpoints you need

Each style setting falls through to the one below it — desktop follows tablet, tablet follows mobile. Set Mobile style alone and the heading uses it at every width. Only set the tablet or desktop styles when the heading genuinely needs to change size at those widths.

Tips

• Use // rather than pressing Enter to break a heading onto a second line. It’s the only way to force a break in this field.
• Set the bottom padding low. The default 7rem on desktop is generous for a heading that’s introducing the section directly beneath it. Bring it down so the heading reads as attached to what follows rather than floating between two things.
• Don’t use it for a heading a section already has. Nearly every section here takes its own title. Adding a Title section above one gives you two headings and doubled spacing.
• Add a Section ID if a jump nav points at this heading. In-page links need an anchor, and this is where it’s set.
• For a heading with a paragraph under it, use the Rich Text section instead — it takes a Title block and body copy together, with the spacing between them already handled.