Feature Section Sierra

overview

A page-width, auto-alternating feature section with images that break out to the viewport’s edges.

Style Preview

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Alternating feature card sections are very popular. You’ll usually see page-width sections using this effect, as those are easy to make. On the other hand, full-width alternating feature cards aren’t so easy. This is especially true when you want to use uneven columns and want to maintain proper page-width alignment on the card content.

The trick to doing this correctly is dynamically accounting for the viewport width. This requires a small javascript snippet embedded inside the Frame on import.

Additionally, the frame must be built so the image can conform to a specific aspect ratio while growing in height for users who desire more content in the content column.

On mobile, the cards will stack content in the correct order, and the full-width effect is removed from the images.

Building a section like this has many hurdles and challenges, but we’ve overcome all the biggest ones with this frame while making it adjustable for the user.

Query Loop Compatible

Frame Created on February 26, 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

--boxed-layout-width

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.