Paragraphs Bundles

Paragraphs Bundles provides reusable Drupal Paragraphs components for layouts, media, interactive displays, and content integrations. The companion PB Import module supports CSV-based imports.

The module provides 31 selectable paragraph components with configurable colors, borders, spacing, widths, layouts, and responsive behavior. Interactive components use vanilla JavaScript rather than jQuery, and optional Solo theme integration adds theme-specific page controls.

Watch the Paragraphs Bundles playlist - Explore a live demonstration

Some Paragraphs Bundles display patterns are also available as Drupal Views styles in the Vanilla Views suite. The ten modules use vanilla JavaScript and provide Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Landing-page examples built with Paragraphs Bundles and the Solo theme

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

Solo theme color schemes used by the demonstrations

The Solo theme used by the demonstration site includes 50 predefined color schemes:

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 Grid Example
12. Paragraph Bundle Hero Example
13. Paragraph Bundle Icon Example (Google Material Symbols & Image)
14. Paragraph Bundle Image (Original Size) Example
15. Paragraph Bundle Image Background Example
16. Paragraph Bundle Image Overlay Example
17. Paragraph Bundle Lightbox Image Grid Example
18. Paragraph Bundle Link Example
19. Paragraph Bundle Modal Example
20. Paragraph Bundle Node Reference Example
21. Paragraph Bundle One Column Example
22. Paragraph Bundle Parallax Example
23. Paragraph Bundle Responsive Image Narrow Example
24. Paragraph Bundle Responsive Image Wide Example
25. Paragraph Bundle Simple Example
26. Paragraph Bundle Slideshow Example
27. Paragraph Bundle Tabs Example
28. Paragraph Bundle Three Columns Example
29. Paragraph Bundle Two Columns Example
30. Paragraph Bundle Views Example
31. Paragraph Bundle Webform Example
32. PB Content & PB Block Types Example - Understanding the PB Paragraphs Content Type and PB Block Type

Features

• jQuery-free interactions: Interactive components use vanilla JavaScript and Drupal core libraries.
• Configurable presentation: Components provide controls for colors, borders, spacing, widths, layouts, shadows, and background opacity.
• Five responsive breakpoints: Multi-column components can change their layouts at five configurable viewport thresholds.
• Organized editing: Content and Display tabs separate editorial fields from presentation controls.
• Optional Solo integration: Theme-specific controls are available when the Solo theme is used.

Each component is packaged as an optional submodule so site builders can enable only what a site needs. This keeps the Paragraphs add dialog, active configuration, dependencies, and front-end assets focused instead of loading every available bundle.

The module allows the creation of paragraph bundles that consist of two group field horizontal tabs: Content and Display.

Display tab

The Display tab provides a comprehensive set of customization options for the appearance of the paragraph bundle. It includes six color input fields for:

• Background color
• Background color hover
• Text color
• Text color hover
• Border color
• Border color hover

In addition to these, there are seven more fields for further customization:

• Border
• Border radius
• Margin
• Padding
• Max Width
• Box shadow
• Background color opacity

These 13 fields are the default and are found in most bundles. However, the number of fields can vary according to the bundle type.

Content tab

The Content tab is where the actual content fields of the bundle are located. The number of fields here will depend on the bundle type.

Where a component provides a title, editors can select H1 through H6 or a plain container and align the title left, center, or right. Editors should choose a level that preserves the page heading hierarchy.

Return to the project overview

31 paragraph components and page-building tools

The module provides 31 selectable paragraph components, plus the PB Block custom block type, PB Content content type, and PB Node Reference content type.

The paragraph components are organized into four groups: Display Formats, Interactive Elements, Layout Structures, and Content Integration.

1. Display formats

1. 3D Carousel: Presents content in a rotating 3D carousel format.
2. Carousel: Displays nested content with configurable navigation, looping, autoplay, spacing, and slide width.
3. 3D Flip Box: Displays content in boxes that flip in a 3D space.
4. Lightbox Image Grid: Arranges images in a responsive grid layout and opens each image in a Lightbox.
5. Slideshow: Showcases content in a slideshow format.
6. Responsive Image Narrow: Adapts images to fit different screen sizes, either in square formats.
7. Responsive Image Wide: Adapts images to fit different screen sizes, either in rectangle formats.
8. Parallax: Creates a parallax scrolling effect for images or other content.

2. Interactive elements

1. Accordion: Displays content in a collapsible format, allowing users to expand or hide sections.
2. Tabs: Organizes content in a tabbed interface.
3. Modal: Displays content in a modal window, often used for login forms, notifications, or additional information.
4. Alert: Shows alert messages or important information in an interactive format.

3. Layout structures

1. Grid: Displays content in a grid layout, adjustable between one and twelve columns.
2. One Column: A simple, single-column layout.
3. Two Columns: Divides content into two responsive columns with optional sticky and collapsible behavior.
4. Three Columns: Arranges content in three responsive columns with optional sticky and collapsible behavior.
5. Card Two Columns: Displays content in a card-style layout within two columns.
6. Card Three Columns: Displays content in a card-style layout within three columns.
7. Hero: Typically a large, full-width banner or image, often used at the top of a page.

Return to the project overview

4. Content integration

1. Node Reference: For referencing any content.
2. Block Content: For placing and arranging blocks of content.
3. Drupal Block: Integrates Drupal blocks into the layout.
4. Image: A module dedicated to displaying individual images.
5. Image Overlay: Adds overlay effects to images.
6. Link: Specifically for adding and managing hyperlinks.
7. Image Background: Create any content with an image background.
8. Simple: Provides a general-purpose content component.
9. Icon: Display Google Material Symbols or Image Icon.
10. Views: Integrates the Views module, a powerful Drupal tool for organizing and displaying content.
11. Contact Form: Embeds contact forms.
12. Webform: Embeds web forms for user input and interaction.

Each component can be configured through its Content and Display tabs.

The PB Block is a custom block that includes a paragraph field. This block can be utilized whenever you need to create a paragraph block and reference it in any content type or position it in any region. It is compatible with all themes.

PB Content is a custom content type with its own width and background settings. It can be used with any theme; its region controls are designed for the Solo theme. Its form is organized into Content and Display tabs.

Display tab

• A list of all solo regions that can be disabled.
• A field to select the maximum content width (800px / 50rem, 1024px / 64rem, 1280px / 80rem, 1440px / 90rem, 1600px / 100rem, 1920px / 120rem, 2560px / 160rem or 100%).
• An input field to select the content background color.
• A slide range field to select the background opacity value from (1 to 100).

Content tab

• A paragraph field to add any paragraph bundle. Note that the width setting for the paragraph bundle is disabled; the content settings will override it.
• A block content reference field. Here, you can reference any paragraph block field created by PB Block.

PB Content can create a page with an independent width and background and can suppress selected Solo regions such as the header, menus, and footer. Combined with the column components, it supports standalone landing-page layouts.

Requirements

• Paragraph module
• Field Group module

Installation

composer require 'drupal/paragraphs_bundles:^1.0'

Download and enable the Paragraph and Field Group modules if you haven't already. Download and enable this module.

Usage

After enabling the module, you can start creating custom paragraph bundles. Each bundle can be customized with its own colors, border, layout, box shadow, margin, and padding.

Support and maintenance

Questions, ideas, and bug reports are welcome. Please use this project’s issue queue so discussions and solutions remain available to the Drupal community.

Maintainers monitor issues, but response times depend on availability.

Developed and maintained by Alaa Haddad of Flash Web Center, LLC.

AI disclosure: AI tools assisted with drafting and reviewing this project description. The maintainer verified the final content against the project source.