Paragraph Bundle Card Two Columns

The paragraph bundle Card Two Columns is a highly customizable and responsive layout tool designed for use in Drupal, leveraging core modules like Media, Media Library, and Responsive Image. It's structured to create a three-column card layout, with extensive styling and content options, making it suitable for a wide range of web design needs.

Display Tab:

Under the Display tab, users can fine-tune the appearance of their layout with a variety of fields:

1. Background Color: This option lets you pick a color for the background area of your paragraph. It's like choosing a paint color for the wall behind your text.
2. Background Color Hover: This is a fun feature! When you move your mouse cursor over the paragraph, the background color changes to the color you pick here. It's like a magic trick for your paragraph!
3. Text Color: Here, you can decide what color the words in your paragraph will be. It's like selecting the ink color for writing your paragraph.
4. Text Color Hover: Similar to the background hover, this changes the text color when you hover your mouse over the paragraph. Imagine the text changing color like a chameleon when you move your mouse over it.
5. Border Color: This option lets you choose a color for a thin line that surrounds your paragraph, like framing a picture.
6. Border Color Hover: When you hover your mouse over the paragraph, the border color changes to what you choose here. It's another way to make your paragraph interactive and eye-catching.
7. Border: In this section, you have the option to choose from 11 solid line styles, each varying in thickness, for your paragraph's border.
8. Border Radius: This option allows you to round the corners of your paragraph's border. You have 6 styles to choose from, ranging from slightly rounded to completely circular corners.
9. Margin: This sets the space between your paragraph and other elements on the page. You can choose from 6 options to determine how much space you want around your paragraph.
10. Padding: Padding is the space between your text and the border of the paragraph. This option gives you 8 choices to decide how much space you want inside the border.
11. Max Width: This lets you control how wide your paragraph can be. You can choose from 7 different widths in pixels, or set it to 100% which will make the paragraph stretch as wide as its container allows.
12. Box Shadow: You have 2 options here to add a shadow effect to your paragraph. This makes it look like your paragraph is slightly raised above the page, giving it some depth.
13. Background Color Opacity: This is a slider that lets you adjust how see-through the background color is. Sliding it down makes the background more transparent, allowing whatever is behind it to show through a bit.

There are two extra fields:

1. Card Layout: A dropdown with 5 different layout styles to choose from.
2. Available Breakpoints: A dropdown with 5 breakpoint options, dictating when the columns should collapse into a different layout for better responsiveness.

Content Tab:

This tab is designed for content management with various fields:

1. Title: A field for the content title.
2. Body Fields: Two separate fields, Left and Right, for content. These support nesting of two paragraph bundles – Text and Image.
   • Display Tab: Inherits the same fields as the parent for consistent styling.
   • Content Tab: Includes either a media field or a text area.

Text and Image Bundles:

These nested bundles come with their own set of features:

1. Media Field: For image upload. Post-upload, three fields become available:
   • Alternative Text: For accessibility and SEO.
   • Title: The title of the image.
   • Image Caption: A brief description or caption of the image.
2. Link Field: To make the image clickable, directing to a specified URL.
3. Image Link Title Field: For the title attribute of the image link, aiding in accessibility and additional information.

Image Handling:

The view mode for the image bundle is tailored for web performance and responsiveness:

• WebP Conversion: Images are automatically converted to the WebP format for efficiency.
• Responsive Image Styles: Custom responsive styles are applied, using 3 different image styles that adjust according to the device size.

Conclusion:

This Drupal paragraph bundle offers a high degree of customization for creating visually appealing and responsive three-column layouts. The combination of styling options under the Display tab and content management under the Content tab, along with the advanced handling of images and text, makes this tool extremely versatile for web designers and content managers working within the Drupal ecosystem.