Layout components (for Canvas)

Provides several layout components to build compelling pages using a page builder (Canvas or Gutenberg) or directly in a theme.

The handful of flexible blocks like Row and Grid enable non-technical site-builders to construct any page design.

Each component is built as a single-directory-component (SDC) using primarily HTML and CSS, without unnecessary JavaScript, and no bloated user interface.

These components work well as the basis of a new custom theme, or to add layout options to an existing theme.

See live demo

Features

The components are:

• Columns: A row of columns; collapses into multiple rows on small devices.
• Row: A horizontal row of blocks; collapses into multiple rows on small devices. Each block can be a different size.
• Grid: A grid of equally-sized cells; can be used to create a row of equally-sized columns.
• Container: A simple wrapper that can contain one or more other blocks, with a title, classes, etc.
• Sized container: A more powerful wrapper that enables you to choose the size and constraints of the block; typically used within a Row.
• Expander: Interactive heading used to toggle the display of further information; each item can be "collapsed" with just a short label visible or "expanded" to show the full content. Sometimes called a "collapsible", "Details & summary", "Disclosure". Typically used for frequently-asked questions.
• Tabs: A set of multiple panels - one shown at a time - with linked buttons to switch between them. Use it for reducing clutter and fitting more into a smaller space.

Goals

• Lightweight: Built with as little code as possible, for performance and security.
• Flexible: Works well with any theme and all modules, now and in the future.
• Responsive: Adapts to any device and screen (from huge to tiny), and in all environments.
• Accessible: Built with standards-compliant HTML that works well for people with any abilities or disabilites.
• Human-made: Built and tested entirely by passionate web developers; no AI used.

Post-Installation

To use the components in Canvas:

1. Go to the Canvas editor (/canvas/editor/) and create or edit a page
2. Open the Library (+) in the left sidebar, find the Layout group, and choose a component
3. Drag the component onto the page, and edit its settings in the right sidebar
4. Drag other components from Library into the component

To use the components directly in your theme (without a page builder), see Using your new single-directory
component.

Recommended modules / libraries

Works well with Drupal Canvas or Gutenberg (in the upcoming v4).

Supporting this Module

If you spot any issues with the components, please submit a bug report to let us know.

If there are any other layout components you'd like added to this module, also let us know.