Feature Section Sierra
overview
A page-width, auto-alternating feature section with images that break out to the viewport’s edges.
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.
Variables
Width of the card's content column
Value of the gap inside the card
Aspect Ratio of the featured images
Value of your Boxed Layout Width if you're using the boxed layout
HTML5 Tags & Attributes
Accessibility Notes
Related Frames
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.