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

Frame Created on February 27, 2023

Frame Last Updated on November 1, 2023

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

--grid-card-gap

--image-aspect-ratio

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.