Components are specific building blocks of your digital experience that can be used within the Experience Builder user interface. They encapsulate functionality, design, and content to create reusable elements across your site. They can be used to build pages, header and footer, and other components.
The Experience Builder user interface includes the Component Library, which consists of a drag-and-drop component system to help you create and customize pages efficiently. With Component Library, you can add sections and components to pages directly. For frontend page building, sections and components can be dragged and dropped from the Component Library onto the page. It works in conjunction with the design system approach to help teams maintain consistent style and interaction patterns across pages.
Each component consists of the following elements:
Term | Definition |
|---|---|
| JavaScript | Defines the behavior of the component. Components are rendered using Preact with a React compatibility layer. |
| Tailwind | Components and CSS may use Tailwind CSS. |
| CSS | Controls the styling of the component. |
| Global CSS | Styling that applies across all instances. |
| Props | Configurable properties that change the appearance or behavior of the component. |
| Slots | Areas where other components can be placed. |
The following table lists the terms related to components:
Term | Definition |
|---|---|
Component Type | The definition or template of a component that defines its structure and properties. For example, Button component. |
Component Instance | A specific occurrence of a component on a page with its own unique configuration. For example, Submit button in a form. It has its own unique configuration and it can moved, copied, or deleted independently. |
| Component Settings | The configuration options for a specific instance that change the component’s appearance such as color and size, behavior such as links and interactions, and connection to dynamic content sources. |
Props | Configurable properties that change how a component looks or behaves. |
Slots | Designated areas within components where other components can be placed. |
Override | A customized version of a default component with modified properties or behavior. |
Global Styles | Styling rules that apply to all instances of a component across the site. |
Instance Styles | Styling applied to a specific instance of a component. |
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Thu Jul 31 2025 08:53:55 GMT+0000 (Coordinated Universal Time)