This project is not covered by Drupal’s security advisory policy.
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.
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:
- Go to the Canvas editor (/canvas/editor/) and create or edit a page
- Open the Library (+) in the left sidebar, find the Layout group, and choose a component
- Drag the component onto the page, and edit its settings in the right sidebar
- 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.
Project information
- Project categories: Content editing experience
- Ecosystem: Single Directory Components, Drupal Canvas, Gutenberg
- Created by droces on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
