Quote Component to Support Varbase Canvas

Problem/Motivation

We need to develop a new Blockquote component that is fully compatible with Drupal Canvas and follows Bootstrap 5 styling standards.
The component should provide a clean and reusable quote presentation block with structured author information and flexible styling options.

The Blockquote component will be used for testimonials, highlighted statements, citations, and featured quotes across landing pages and content sections.

Key requirements:

• Bootstrap 5 compatible structure
• Canvas drag-and-drop support for quote content
• Configurable quote text style (Normal / Italic)
• Author and Author role styling (Quotee text style applied to both)
• Horizontal alignment support (Start, Center, End)
• Default bordered-left style
• Configurable max-width option
• No inline CSS/JS (SCSS-based styling only)

Steps to reproduce

1. Add the Blockquote component in Drupal Canvas.
2. Insert quote text.
3. Add Author name and Author role/source.
4. Select quote text style (Normal or Italic).
5. Adjust alignment (Start, Center, End).
6. Configure optional max-width setting.

The component should render consistently, with author styling applied properly and alignment affecting the entire content block.

Proposed resolution

• Develop a new Blockquote component following Bootstrap 5 structure.
• Implement left border styling as default visual indicator.
• Add configurable Quote text style (Normal / Italic).
• Apply Quotee text style consistently to both Author name and Author role.
• Implement horizontal alignment using Bootstrap utility classes and enforce via SCSS for nested elements.
• Add configurable max-width option for layout control.
• Remove unused color variations and simplify design to a single default style.
• Ensure full Canvas compatibility and drag-and-drop support where required.

The Blockquote component is designed to be lightweight, consistent, and production-ready, aligned with Varbase and 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
• ❌ 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