W3CSS Paragraphs is a Drupal module that gives editors 23 optional paragraph-bundle submodules — carousels, accordions, tabs, hero banners, image overlays and more — built on the W3.CSS framework, plus Text and Image bundles in the base module itself. It requires Drupal ^10 || ^11 || ^12 and PHP ^8.1, and it is free on drupal.org.
What it is, and what it depends on
The base module, w3css_paragraphs, ships two built-in paragraph types — Text and Image — and nothing else is forced on. Every other bundle listed below is its own submodule, so a site that only needs Accordion and Hero enables two submodules and carries no code for the other 21.
| Requirement | Value |
|---|---|
| Drupal core | ^10 || ^11 || ^12 |
| PHP | ^8.1 |
| Composer package | drupal/w3css_paragraphs |
| Contributed dependencies | Entity Reference Revisions, Paragraphs, Field Group |
| Core dependencies | Block, Field, File, Filter, Image, Link, Media, Media Library, Options, System, Text, User, Views |
Note what is not in that dependency list: W3CSS Theme. The two projects are designed to work together and share the same visual language, but the module has no formal Drupal dependency on the theme — it installs and runs under any theme. Where a bundle needs an extra contributed module, that requirement lives on the individual submodule, not the base module: Quicklinks needs Link Attributes, Views needs Views Reference, Webform needs Webform, Menu needs Menu Reference Render, and Contact Form needs Contact Formatter.
The 23 bundle submodules
Grouped by what they do. Enable only the ones you place.
Display and media
3D Carousel, 3D Flip Box, Card, Hero, Hero Full Width, Image Overlay, Responsive Image, Slideshow.
Interactive
Accordion, Modal, Parallax, Tabs.
Layout
One Column, Two Columns, Three Columns, Content Type — the last disables the left and right sidebar regions by default and lets you turn off the header, welcome text, breadcrumb, footer or footer menu on a per-page basis, for building a landing page that does not look like the rest of the site.
Integration
Drupal Block, Custom Block, Contact Form, Menu, Quicklinks, Views, Webform.
What each bundle exposes
Field availability varies a little by bundle, but the common set — read from the module's own feature description — covers background colour, background hover colour, text colour, text hover colour, border colour and border hover colour, each with roughly 30 options; background opacity in ten steps from 5% to 95%; width from 30% to 100%; a choice of 11 border styles and 6 rounded-border styles; and a free-text field for any additional W3.CSS utility class. None of that requires writing CSS.
Installation
composer require drupal/w3css_paragraphsEnable the base module, then only the bundles you need:
drush en w3css_paragraphs -y
drush en w3css_paragraphs_accordion w3css_paragraphs_hero -y
drush crThen add a Paragraphs reference field to a content type and choose which bundles editors may place — same workflow as any Paragraphs-based field.
W3CSS Paragraphs or Paragraphs Bundles?
Both are mine, both solve the same problem, and the honest answer is that Paragraphs Bundles is the newer generation and is where active development is focused.
| Consideration | W3CSS Paragraphs | Paragraphs Bundles |
|---|---|---|
| Drupal core | ^10 || ^11 || ^12 | ^11.3 || ^12 |
| Bundle count | 23 submodules + 2 built-in (Text, Image) | 39 bundles in 27 submodules |
| Styling approach | Field-based colour and border settings per paragraph | Generated per-paragraph stylesheets, BEM-strict, theme-agnostic by design |
| Best for | A site already running it, or one that needs to stay on Drupal 10 | A new Drupal 11.3+ or 12 build |
If you are starting fresh on Drupal 11.3 or 12, read the Paragraphs Bundles page before installing this one. If you are on an older Drupal 10 site, or already have W3CSS Paragraphs content built, staying here is the right call.
Troubleshooting
- A bundle submodule fails to install
- Check whether it needs an extra contributed module first — Quicklinks, Views, Webform, Menu and Contact Form each require one, listed in the requirements table above.
- The Content Type bundle isn't hiding regions the way I expect
- Region visibility is set per paragraph display, not globally — open the paragraph's Display tab and confirm which regions are unticked for that specific page.
- Entity Reference Revisions is missing after a manual download
- Composer installs it automatically as a dependency. If you installed by downloading the module directly, add it with
composer require drupal/entity_reference_revisions.
Common questions
Do I need the W3CSS Theme to use this module?
No. There is no formal theme dependency in the .info.yml. It is designed to look best alongside W3CSS Theme, but it installs under any theme.
Will it run on Drupal 12?
Yes. The module declares ^10 || ^11 || ^12.
Should I install this or Paragraphs Bundles?
Paragraphs Bundles is the newer, actively developed generation with more bundles and a Drupal 11.3+/12 floor. Use it for a new build. Use W3CSS Paragraphs if you need Drupal 10 support or already have content built on it.
Can I enable just one bundle?
Yes. Each of the 23 bundles is its own submodule with its own dependencies. Enable the base module plus whichever ones you use.
Need a hand building with it?
W3CSS Paragraphs is free and GPL-licensed, like all my contributed work. If you want help choosing a bundle set, migrating existing paragraph content, or deciding whether to move to Paragraphs Bundles, that is my day job.
Read about my Drupal services, see what a Drupal developer brings to a project, or get in touch.
