Component header
Every component starts with the same four fields, and together they form its header — the part visitors read before the component's own content.
Title — used only in the edit form, in the collapsed component list, so you can tell components apart. Visitors never see it. Name it for what it contains: FAQ – permits, not Accordion 2.
Heading — the visible heading. Rendered as an H2, so it becomes a section of the page and an entry in the On this page list.
Hide heading — keep the heading for screen readers and the table of contents but do not display it. Use it when the design already makes the section obvious, or when a component sits directly under a page heading that says the same thing.
Introduction — a short piece of rich text between the heading and the content. Optional.
Where the header sits
The Layout field in the Presentation group places the header (side) relative to the component's main content (main) on a twelve-column grid. Main (12) stacks them, heading above content, and is right for most components. Side (3) Main (9) or Side (4) Main (8) put the heading and introduction in a narrow column beside the content — good for lists and galleries with a long introduction. The Gap variants add a column of space between the two.
Position then sets the component's overall width and alignment within the page: full width when empty, or Left, Center or Right at 33%, 50% or 66%.
Headings, hidden or not, are what make a page navigable, so give every component one — even if you then hide it.
Last updated