Feature Card Quebec

Feature Card Quebec is a very visual, horizontal feature card that uses two separate images and a content overlay. Use it for features, services, testimonials, callouts, CTAs, blog posts, events, and more!

This card uses CSS Grid techniques position the content over one of the images while keeping the content first in the DOM structure for better accessibility.

The minimum height of the entire card is adjustable via a locally scoped variable, as is the position of the content. You can easily choose to have the content overlay appear on the right side of the card versus the left simply by adjusting the –content-position variable.

On mobile, the card stacks to a single column. The content position is respected on mobile as well. If the content was in the left column, it’ll appear in the top row on mobile. If the content was placed in the right column, it’ll appear in the bottom row on mobile.

Since the images are position absolute, the card will accept any image aspect ratio without breaking. And since the card height is controlled by a minimum height, longer content can’t break its layout, either.

Feature Card Quebec is query loop compatible and the content position can easily be alternated if the card is used in a loop or a group.

If you want the entire card to be clickable, we recommend using the clickable parent technique.