> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/concepts-and-tools/component-header.md).

# 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.

![The shared component fields](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-49a0e4b7a5449bdde6a4f02462f9a8f6dc40a061%2Ff-accordion.png?alt=media)

* **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](/convivial-for-govcms/concepts-and-tools/on-this-page.md) 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.