Hi everyone. While exploring the excellent new Canvas page builder, I realised the need for some components that provide layouts I can use in my landing pages. I build my themes from scratch, so using components from an existing theme didn't seem like a good fit.

Because I couldn't find any modules that provide the components I wanted, I made one 😄

The module includes the following components: Columns, Row, Grid, Container, Sized container, Expander, Tabs. Each one is explained on the module page. They utilise various props and slots of Canvas components, so they feel fully native to Drupal.

I've made them as nicely responsive as possible, so for example, a 4-column layout becomes 2 columns on smallish screens (e.g. iPads) and 1 column on small screens (phones).

I rarely use AI, and I really wanted these to be super simple and lightweight, so I coded them myself. They're almost entirely just twig (HTML) and CSS, and only 1 of the 7 layouts actually even ships any JavaScript (Tabs; and it's minimal).

It turns out that single-directory components (SDCs) like these can be used in more than just Canvas; they can be used directly in the theme without a page builder (e.g. by referencing them from the traditional twig templates), and the upcoming version 4 of the Gutenberg module will has first-class support for SDCs. For now they don't work with Layout Builder, but I'm not sure how much demand there is for it any more...

Oh and the each component is completely independent, so if you want to use just one, you can just copy it straight into your theme without even installing the module; that's the beauty of open source.

Let me know what you think, and if you have any requests 😊