Feature Card Sierra

overview

A page-width feature card with an image that breaks out to the viewport’s edges.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Feature Card Sierra is a page-width feature card with special powers. Its image breaks out to the edge of the viewport.

When combined with Feature Grid Sierra, creating automatically alternating feature cards that appear full width while maintaining proper page-width content alignment is easy.

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.

--features-span

Width of the card's content column

--grid-card-gap

Value of the gap inside the card

--image-aspect-ratio

Aspect Ratio of the featured images

HTML5 Tags & Attributes

figure

Accessibility Notes

No additional accessibility notes for this frame.

Related Frames

Feature Section Sierra

Feature Grid Sierra

FAQs

How do I flip the order so that the first card starts with text on the left and image on the right?

Easy! Click on the grid and make sure the .fr-feature-card-sierra class is active.

Open the CSS tab and find this code:

/* Grid Alternating */ 
root > *:nth-child(odd) > *:last-child {
   order: -1;
   justify-content: flex-end;
}
root > *:nth-child(even) > *:last-child {
   order: 0;
   justify-content: flex-start;
}

All you have to do is swap the odd and even parts of the statement:

/* Grid Alternating */ 
root > *:nth-child(even) > *:last-child {
   order: -1;
   justify-content: flex-end;
}
root > *:nth-child(odd) > *:last-child {
   order: 0;
   justify-content: flex-start;
}

You’re all set!

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