Utility Components

Provides several user interface (UI) components to build compelling pages in a Drupal site using a page builder (Canvas or Gutenberg) or directly in a theme.

Includes popular components like Card, Icon, Heading, Accordion, and Hero.

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 enhance the user interface of an existing theme.

See live demo

Features

The components are:

1. Cover: A section that can have a background image, can be the height of the screen, and with custom positioning of the content.
2. 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.
3. Heading: A title or caption used to introduce a new section.
4. Hero: A large banner, usually appearing as one of the first items on a page; it often contains a full-width background image.
5. Icon: A graphic symbol designed to visually indicate the purpose of an interface element.
6. Image
7. Image card: A container for content representing a single entity. e.g. a contact, article, or task.
8. Image beside text: An image beside a text block; the image can be on the left or right.
9. Line: A horizontal line. Sometimes called a divider, a separator, or a horizontal rule.
10. Quote: A quotation: either from a person or another outside source, or to highlight a passage of the current document (a pull quote).
11. Text: Basic text block; can show paragraphs, lists, etc. and inline formatting like bold and italic.
12. Styled text: Single line of text with support for font size, style and weight, letter spacing (tracking), line-height (leading), and capitalisation. It's good for those little colourful labels of all-caps text that AI likes to add to designs, or for extra large text (e.g. in a "key numbers" row).
13. Carousel: Displays multiple slides of content, one or more at a time. Choose between a "slide" and "fade" animation. Navigation between slides can be automatic, or controlled via swiping, scrolling, or arrow buttons. Built using Splide.
14. Marquee: Displays elements like images or text in a continuously-scrolling bar. Can be paused, and has controls for things like speed, gap, direction, etc. Built using Marquee6k.

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 disabilities.
• 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 Utility group, and choose a component
3. Drag the component onto the page, and edit its settings in the right sidebar

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.