Feature Card Quebec

overview

A two column feature card that uses two separate images with a content overlay on one of the columns.

Feature Card Quebec
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

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.

Query Loop Compatible

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.
--content-position
--card-height

Accessibility Notes

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

Related Frames

No related frames.

Related Components

No related components.

FAQs

    Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.