What are components?
Components are mini templates with custom edit forms. They can be added and combined on the Layout canvas to create new layouts. Editors can use them to create pages where the content and layout requirements don’t fit within a fixed template structure.
Components can include editable content, styles and other settings. When an editable Component is used on a page, all data entered into the editable fields is stored with the page as content. A Component can be used multiple times on the same page or different pages and have different content for each instance where it is used. For more information, see Create a component.
The diagram below shows how the Component builder allows you to create both the Components layout and the form editors will use to edit the content when it's used on a page (or other content entity).
6.9 introduces Custom components allowing full control over the contents and behaviour of components via custom code.
Components for site builders
Components are mini-templates that can be added and combined on the Layout canvas. As a site builder you can create the layout of a Component and the editing form of the Component at the same time within the Component builder. For more information, see Create a component.
Components include a number of important features:
- Globally managed - If you change the layout of a component it will change in all places where it's used
- Editable content - Editable content is tied to the instance where a Component is used. Each instance can have its own content. For more information, see Create an editable component.
- Editable styles - You can include editable styles within your Component
- Nested components - Components can be used as containers on your layout canvas and contain child Components and Elements. For more information, see Adding drop zones to a component.
The Component layout and Component form is configuration. It can be deployed with other configuration. When a Component is used on a page, the content added to the editable fields is stored as content within Layout canvas field.