Section types
When you add a new section, you choose a type. Each type is designed for a specific kind of content. Here is a quick reference.
Link Heading
Section titled “Link Heading”A top-level section heading that also serves as a navigation anchor. Use it to start a new named section on your brand guide — the heading text appears in the page navigation so visitors can jump directly to it.
Sub Heading
Section titled “Sub Heading”A second-level heading, sitting under a Link Heading to divide a longer section. It appears in the page navigation beneath its Link Heading; turn on Exclude from navigation in the section settings to keep it out.
Sub Sub Heading
Section titled “Sub Sub Heading”A third-level heading, for the finest-grained labelled subsection. Like Sub Heading, it appears in the navigation unless you exclude it.
Rich-text body copy: paragraphs, sub-headings, lists, and links. Use it for any descriptive, instructional, or explanatory text. Formatting controls (bold, italic, links, and more) appear when you select text.
Colors
Section titled “Colors”A display of brand color swatches arranged in a grid. Use it to document your color palette with names and hex values. You can configure the number of columns in the section settings.
Icon List
Section titled “Icon List”A list of labeled items, each with an optional icon. Use it for usage guidelines, feature lists, or do/don’t examples. The default icon and label display can be adjusted in the section settings.
A single image or figure with an optional caption and link. Use it to showcase a brand asset, photograph, or graphic example. Display options such as aspect ratio, border, and image fit are available in the section settings.
Do / Don’t Media
Section titled “Do / Don’t Media”A single image or video tagged as a do or a don’t example, shown with the matching marker. Place two inside a Container to build a side-by-side comparison of correct and incorrect usage. The tag, caption, aspect ratio, border, and image fit are all in the section settings.
A video player, either self-hosted from your media library or embedded from YouTube, Vimeo, or Instagram. Use it for interviews, product demos, brand films, or a silent looping background clip. Choose between two playback modes in the section settings: click-to-play with full controls and sound, or an ambient muted loop. An optional caption can be shown beneath the player. Large self-hosted files require your site’s dedicated video storage to be turned on.
Document
Section titled “Document”A single file — a PDF or a self-contained HTML page — shown as a clickable row with its file name, size, and a PDF or HTML badge. Clicking the row opens the file full-screen over your page, so visitors can read it without leaving the guide; on a phone, PDFs open in the device’s own viewer instead. Choose the file from your media library in the section settings — or, on a Document section that has no file yet, drag a PDF or HTML file straight onto it (or click it to pick one from the library). Leave the title blank to show the file name, or type one to override it. Show in Documents menu — on by default — also lists the file under a Documents heading at the bottom of the site navigation, so visitors can open it from any page. Use one Document section per file; place several inside a Container to present a set of downloads side by side. Files larger than 2.5 MB require your site’s document storage to be turned on.
Button
Section titled “Button”A call-to-action button linking to another page on the site or to an external URL, optionally serving the target as a file download. Use it for a single prominent action.
Container
Section titled “Container”A layout wrapper that groups other sections side by side in one or more columns. Use it to display related content — for example, two Media sections — in a multi-column arrangement. The section settings hold the layout mode (Grid, fixed columns each child can span, or Masonry, a gallery that flows children at their natural height), the column count, and — in Grid — Equalize row height. Settings you set here can also be applied to every child at once.
Spacer
Section titled “Spacer”A block of vertical whitespace. Use it to add breathing room between sections when you need more visual separation than the default spacing provides.
Building or developing the site? See the Section schema reference for each section type’s exact fields.