Featured Card to maintain the Drupal Canvas on Varbase

Problem/Motivation

In the Featured Card component (Canvas supported), when using media position Start or End, the image does not always stretch to match the height of the content slot.

When the content area becomes taller (for example, long text or a quote), the media image remains shorter, which causes visual misalignment between the media and content areas. The expected behavior is for the image to fully cover the media area and match the content height.

Steps to reproduce

1. Add a Featured Card component.
2. Set media position to Start or End.
3. Add long content in the content slot.
4. Observe that the content column height increases.
5. Notice the image does not stretch to match the content height.

Proposed resolution

• Adjust the layout to ensure media and content columns share equal height (flex-based stretch).
• Ensure the media container fills the available height.
• Apply object-fit: cover to the image so it covers the media area correctly.
• Keep behavior responsive and compatible with existing component settings (padding, border, equal height).

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