Global elements are the reusable components that appear again and again throughout your help center—buttons, cards, headings, links, form fields and more. The Global elements panel lets you define how each of these looks in one place, so a single change updates every instance across your theme.
This is the design-system layer of your theme. Where global styles set the foundational colors and type, global elements define the components built on top of them.
What you can style
Global elements are grouped by purpose:
| Group | Elements |
|---|---|
| Basic | Avatars, badges, buttons, form fields, headings, links, paragraphs and search fields. |
| Layout | Cards, containers, rows and sidebars. |
| Navigation | Breadcrumbs, dropdown items and navigation links. |
Buttons, for example, can be styled across their standard, primary, secondary and tertiary variants and their small, medium and large sizes—mirroring the button elements in the framework.
Choosing a variant
Some global elements, such as breadcrumbs and pagination, ship with several ready-made designs. Use Change template to preview the available looks and choose the one that best fits your brand as a starting point, then fine-tune it with the editing controls.
How it relates to page elements
When you add a button or card to a page using page elements, it inherits its appearance from the matching global element. That means you can lay out a page without worrying about styling each component individually—and when you later refine a global element, every page that uses it updates at once.
To change how a single instance looks without affecting the rest, override its styles directly on the element. See editing elements.