Application Launcher

Components are specific building blocks of your digital experience that can be used within the Drupal Canvas 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 Drupal Canvas 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. 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, the Button component.
Component Instance	A specific occurrence of a component on a page with its own unique configuration. For example, the Submit button in a form. It has its own unique configuration and it can be 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, behaviors such as links and interactions, and connections 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.

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.

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, the Button component.
Component Instance	A specific occurrence of a component on a page with its own unique configuration. For example, the Submit button in a form. It has its own unique configuration and it can be 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, behaviors such as links and interactions, and connections 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.

Term	Definition
Component Type	The definition or template of a component that defines its structure and properties. For example, the Button component.
Component Instance	A specific occurrence of a component on a page with its own unique configuration. For example, the Submit button in a form. It has its own unique configuration and it can be 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, behaviors such as links and interactions, and connections 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.

Did not find what you were looking for?

Did not find what you were looking for?