Display Default
3D Carousel images
3D Carousel Text
Accoridon
Slideshow
Card
Modal
Three Columns

🌟 Introducing Solo: The Revamped W3CSS Theme on Drupal! 🌟

Hey Drupal Enthusiasts!

I'm excited to share that the W3CSS theme has evolved into Solo! It's sleeker, faster, and packed with new features, now available on Drupal.org. Along with the theme, I've also upgraded the W3CSS paragraphs to the new and improved Paragraphs Bundles, enhancing your content creation experience.

Why Upgrade to Solo?

  • Fresh, modern design
  • Enhanced customization and performance
  • Seamless integration with Drupal

📥 Download Solo Today!

⭐ Upgrade to Solo – where innovation meets elegance! ⭐
Upgrade with ease and give your website a stunning new look. We'd love your feedback!

How to Upgrade: Part One - Part Two

The Solo theme and Paragraphs Bundles module for Drupal

Some of the Paragraphs Bundles modules are now available as Views styles.The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to enhance the visual and interactive experience of Drupal Views using pure, lightweight Vanilla JavaScript, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Comprehensive Landing Page Examples Showcasing All Paragraph Bundles

Blue Skyline - Bright Den - Calm Corner - Color Whirl - Dawn View - Dream Road - Dusk Deck - Earth Base - Green Park - Jewel Place - Ocean Field - Peace Beach - Red Hill - Ring Retreat - Secret Garden - Shadow Line - Shine Land - Sky Pattern - Space Art - Star Circle - Star Gate - Star Home - Summit Point - Sun Plains


The theme includes 50 professional predefined color schemes that can be installed with a single click.

Berry Blue Dreams - Blueberry Skies Quartet - Blushing Magnolia - Celestial Blue Depths - Charcoal Gray - Classic Ivory Lace - Cotton Candy Whispers - Crimson Denim Night - Deep Ocean Shadows - Deep Sea Echo - Denim Twilight - Dusk Shadow Fusion - Eclipse Noir - Enchanted Forest Zest - Ethereal White Harmony - Flaming Sapphire - Galactic Stone Hues - Gentle Ivory Breeze - Gunmetal Echo - Indigo Pulse - Ivory Whisper - Jungle Denim Fusion - Lemon Lime Forest - Luminous Alabaster - Magnolia Afternoon - Metallic Nebula - Midnight Denim Swirl - Midnight Garden Trio - Midnight Navy Duo - Midnight Whispers - Monochrome Splash - Mystic Ash Twilight - Nightfall in Paris - Nocturnal Velvet - Obsidian Cascade - Ocean Depths Mystery - Parisian Skyline - Porcelain Brilliance - Porpoise Dream - Pristine Porcelain Glow - Raspberry Nightfall - Razzle Onyx Elegance - Royal Azure Flame - Rustic Redwood Charm - Salmon Denim Fade - Silken Shadow Whisper - Smokey Quartz Symphony - Soft Silk Elegance - Twilight Ash Mystique - Urban Stone Shadows

Paragraphs Bundles Live Examples

  1. Paragraph Bundle 3D Carousel Example
  2. Paragraph Bundle Carousel Example
  3. Paragraph Bundle 3D Flip Box Example
  4. Paragraph Bundle Accordion Example
  5. Paragraph Bundle Alert Example
  6. Paragraph Bundle Block Content Example
  7. Paragraph Bundle Card Three Columns Example
  8. Paragraph Bundle Card Two Columns Example
  9. Paragraph Bundle Contact Form Example
  10. Paragraph Bundle Drupal Block Example
  11. Paragraph Bundle Hero Example
  12. Paragraph Bundle Icon Example (Google Material Symbols & Image)
  13. Paragraph Bundle Image (Original Size) Example
  14. Paragraph Bundle Image Background Example
  15. Paragraph Bundle Image Overlay Example
  16. Paragraph Bundle Lightbox Image Grid Example
  17. Paragraph Bundle Link Example
  18. Paragraph Bundle Modal Example
  19. Paragraph Bundle Node Reference Example
  20. Paragraph Bundle One Column Example
  21. Paragraph Bundle Parallax Example
  22. Paragraph Bundle Responsive Image Narrow Example
  23. Paragraph Bundle Responsive Image Wide Example
  24. Paragraph Bundle Simple Example
  25. Paragraph Bundle Slideshow Example
  26. Paragraph Bundle Tabs Example
  27. Paragraph Bundle Three Columns Example
  28. Paragraph Bundle Two Columns Example
  29. Paragraph Bundle Views Example
  30. Paragraph Bundle Webform Example
  31. PB Content & PB Block Types Example - Understanding the PB Paragraphs Content Type and PB Block Type

W3CSS Paragraphs Module for Drupal

⚡️ What does the W3CSS paragraphs module entail? This module offers a collection of paragraph bundles constructed using the W3.CSS front-end framework. It is compatible with the ⚡️W3CSS Theme. This gives you the capability to generate an infinite number of UI designs utilizing the features of the paragraph bundle.

The primary module, w3css_paragraphs, encompasses the initial two fundamental paragraph bundles: Text and Image. All other child bundles are contained within a separate bundle/module. All images utilize the media module.

Merge the capabilities of the W3.CSS front-end framework with Drupal Paragraphs, a robust module enabling content creators to construct layouts and structured pages. With the W3.CSS Paragraphs Drupal module, you can swiftly create features such as Slideshow, Accordions, Hero Banner, Image Overlay, Parallax, 3D Carousels, Modals, Tabs (Horizontal or Vertical), 3D Flip Box, One Column Layout, Two Columns Layout, and Three Columns Layout in a matter of minutes. Additionally, Drupal allows for referencing Text, Images, Blocks, Webform, Links, and Views.

Bundle Types: For each bundle type, I created a demo. Feel free to check it.

As usual, everything in the demo is out of the box, nothing is customized.

⚡️W3CSS Paragraphs Live Examples

  1. ⚡️W3CSS Paragraphs Simple - Watch how to build it
  2. ⚡️W3CSS Paragraphs Image
  3. ⚡️W3CSS Paragraphs Responsive Image (Wide)
  4. ⚡️W3CSS Paragraphs Responsive Image (Narrow) - Watch how to build image or responsive image
  5. ⚡️W3CSS Paragraphs 3D Flip Box - Watch how to build it
  6. ⚡️W3CSS Paragraphs Card - Watch how to build it
  7. ⚡️W3CSS Paragraphs Hero - Watch how to build it
  8. ⚡️W3CSS Paragraphs Image Overlay - Watch how to build it
  9. ⚡️W3CSS Paragraphs Modal - Watch how to build it
  10. ⚡️W3CSS Paragraphs Parallax - Watch how to build it
  11. ⚡️W3CSS Paragraphs Contact Form - Watch how to build it
  12. ⚡️W3CSS Paragraphs Drupal Block - Watch how to build it
  13. ⚡️W3CSS Paragraphs Menu
  14. ⚡️W3CSS Paragraphs Quicklinks - Watch how to build it
  15. ⚡️W3CSS Paragraphs Views - Watch how to build it
  16. ⚡️W3CSS Paragraphs Webform - Watch how to build it
  17. ⚡️W3CSS Paragraphs One Column
  18. ⚡️W3CSS Paragraphs Two Columns
  19. ⚡️W3CSS Paragraphs Three Columns - Watch how to use the one, two, or three layout
  20. ⚡️W3CSS Paragraphs 3D Carousel - Images - ⚡️W3CSS Paragraphs 3D Carousel - Text - Watch how to build it
  21. ⚡️W3CSS Paragraphs Accordion - Watch how to build it
  22. ⚡️W3CSS Paragraphs Slideshow - Watch how to build it
  23. ⚡️W3CSS Paragraphs Tabs (Horizontal/Vertical) - Watch how to build it

  24. ⚡️W3CSS Paragraphs Content Type

Understanding the W3CSS Paragraphs Content Type: This content type disables the left and right regions by default, with a standard width of 100%. However, you have the flexibility to adjust the width as per your requirements from the paragraph bundle display. You have the option to disable any of the following regions: Main Navigation Regions, Header Region, Welcome Region, Highlighted Region, Top Regions, Page Title Region, Breadcrumb Region, Bottom Regions, Footer Regions, Footer Menu, and Hide Copyright. There may be instances where you'd want to design a webpage with a unique layout, perhaps without the header, footer, main menu, etc., or maybe you'd want to experiment with different color schemes. This feature, when combined with the paragraph bundles of one, two, or three columns, allows you to create any layout you envision.

Features of the Bundle Type (may vary with different paragraph bundles):

  1. ⚡️Background colors: Choose from 30 different colors.
  2. ⚡️Background color Hover: 30 color options available.
  3. ⚡️Text colors: 30 color options available.
  4. ⚡️Text color hover: 30 color options available.
  5. ⚡️Border color: Choose from 30 different colors.
  6. ⚡️Border color hover: 30 color options available.
  7. ⚡️Background color opacity: After selecting the background color, you can adjust the opacity from 5% to 95% (in increments of 10%). This gives you a total of 330 color variations. Note that the opacity applies only to the background color.
  8. ⚡️Width: Options range from 30% to 100%.
  9. ⚡️Borders: Choose from 11 different styles.
  10. ⚡️Round Borders: 6 styles available.
  11. ⚡️Margin: 6 styles available.
  12. ⚡️Padding: Choose from 8 different styles.
  13. ⚡️Card: Add a 2px or 4px bordered shadow.
  14. ⚡️W3CSS Classes: An extra field for any W3.CSS classes.

Dependencies

For Some Sub Modules:

Installation

Install as any other contributed module.

back to top ☝️

Alaa Haddad

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

  • Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
  • Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
  • Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
  • Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions—and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!

Supporting organizations: 
Flash Web Center, LLC
FlashWebCenter.com: Drupal Developments Services.
Drupal Care
DrupalCare.com: Drupal Update & Maintenance Services.

Project information

Releases

1.0.19 Stable release covered by the Drupal Security Team released 20 January 2025
Works with Drupal: ^9 || ^10 || ^11
Install:

Development version: 1.0.x-dev updated 23 Nov 2025 at 22:49 UTC

Using Composer to manage Drupal site dependencies