Overlay Card to maintain the Drupal Canvas on Varbase

Problem/Motivation

A new Overlay Card component has been built to provide a flexible, Canvas-supported, and Bootstrap 5 compatible card solution for media overlay use cases.
Previously, there was no standardized component that allowed structured overlay content with configurable card size, padding, shadow, border, and alignment options while fully supporting Canvas drag-and-drop functionality.

The goal was to create a production-ready component that:

• Follows Bootstrap 5 design system and utility classes
• Supports Canvas drag-and-drop content slot
• Allows uploaded media (no drag-drop in media area)
• Provides consistent card sizing options
• Supports proper horizontal alignment for all nested content elements
• Avoids inline CSS/JS and follows SCSS-based styling

Steps to reproduce

1. Create or edit a page using Drupal Canvas.
2. Add the new Overlay Card component.
3. Upload media into the media section.
4. Drag and drop content components (Heading, Text, Button, etc.) into the content slot.
5. Select different Card size options.
6. Change horizontal alignment (Start, Center, End).

Expected behavior:

• Card size adjusts consistently with predefined sizing rules.
• Content slot supports drag-and-drop properly.
• Horizontal alignment works for headings, paragraphs, spans, links, and nested components.
• No inline styling is used.

Proposed resolution

• Built a new Overlay Card component following Bootstrap 5 standards.
• Renamed the “Card height” label to Card size for better clarity.
• Removed Content text color options to simplify styling and ensure design consistency.
• Implemented forced horizontal alignment using Bootstrap utility classes and SCSS rules to ensure all nested content respects alignment settings.
• Media section uses uploaded media only (no drag-and-drop support).
• Content section supports Canvas drag-and-drop.
• Implemented shadow, border, padding, and overlay configuration options.
• Ensured compatibility with Canvas schema validation requirements.

The component is now production-ready and aligned with Varbase/Bootstrap 5 architecture standards.

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Code review from 1 Varbase core team member
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A