Hero Card and Slider Components

Hero Card

We need to develop a new Hero Card component that is fully compatible with Drupal Canvas and Bootstrap 5 standards.
The component should provide a flexible hero-style card layout that supports media and structured content while maintaining clean architecture and reusability.

The Hero Card will serve as a reusable building block for landing pages, promotional sections, featured content blocks, and call-to-action areas.

Key requirements:

• Bootstrap 5 based layout (no inline CSS/JS)
• Canvas drag-and-drop support for content slot
• Uploaded media support for media section
• Configurable card options (size, border, shadow, padding, equal height)
• Responsive structure across all breakpoints
• Optional whole-card link (Anchor All)
• Vertical and horizontal alignment options

Steps to reproduce

1. Add the Hero Card component in Drupal Canvas.
2. Upload media into the media area.
3. Drag and drop content components (Heading, Text, Button, etc.) into the content slot.
4. Configure available options such as card size, padding, border, and alignment.
5. Verify responsive behavior across desktop, tablet, and mobile.

The component should render consistently and follow Bootstrap utility classes for styling and spacing.

Proposed resolution

• Develop a new Hero Card component following Bootstrap 5 grid and utility standards.
• Implement separate Media and Content sections.
• Enable Canvas drag-and-drop for the Content slot only.
• Add configurable settings for:
  • Card size
  • Border toggle
  • Shadow options
  • Padding options
  • Equal height
  • Anchor All (whole card clickable)
  • Content alignment
• Ensure fully responsive layout behavior.
• Remove any inline CSS/JS and use SCSS instead.

The Hero Card component will be production-ready and aligned with Varbase architecture standards.

Hero Slider

We need to develop a new Hero Slider component that integrates seamlessly with Drupal Canvas and Bootstrap 5 carousel functionality.
The component should allow flexible hero-style slides with media and overlay content support.

This slider will be used for homepage banners, featured campaigns, announcements, and promotional sections.

Key requirements:

• Bootstrap 5 carousel structure
• Canvas-supported slide content
• Media position options (Overlay, Left, Right, No media)
• Responsive auto-height behavior
• Configurable indicators and arrow controls
• No inline CSS or JavaScript
• Clean SCSS-based styling

Steps to reproduce

1. Add the Hero Slider component in Drupal Canvas.
2. Add multiple slides.
3. Configure media position (Overlay, Left, Right, No media).
4. Adjust controller settings and content alignment.
5. Test across different screen sizes.

The slider should render consistently without layout breaking or overlapping controls.

Proposed resolution

• Develop a new Hero Slider component based on Bootstrap 5 carousel.
• Support multiple slides with structured content areas.
• Implement media positioning options (Overlay, Left, Right, No media).
• Ensure responsive auto-height behavior for smaller screens.
• Position indicators and navigation arrows correctly (left/right alignment).
• Set default white controller color for overlay mode.
• Remove inline CSS/JS and move styling to SCSS files.
• Ensure accessibility and proper semantic structure.

The Hero Slider component will provide a modern, responsive, and Canvas-compatible hero solution aligned with Bootstrap 5 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 and Update Helper on new feature change/addition
• ❌ 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