Content Section Foxtrot

overview

A two-column content section with angled images that break out above and below the section container.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

One of the ways you can make web designs less boxy and more interesting is to allow content to break out over the edges of containers and create a more “layered” content effect.

That’s precisely what Content Section Foxtrot provides you. The two supporting images for the content are angled and break out above and below the section container for more visual interest.

On mobile, the images lose their angles and stack neatly in a 2-column grid, with the images coming after the content to ensure content priority.

The degree of angle, the offset of the images, and the amount of overlap are all easily adjustable via locally scoped variables.

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.

--section-padding

--image-aspect-ratio

--image-width

--image-block-offset

--image-inline-offset

--image-rotation

Related Frames

No related frames.

Related Components

No related components.

FAQs

Why does this frame looking different from the example when I import it?
This frame is designed to achieve a top and bottom section overlap with the images. The downside of achieving that effect is that the frame is sensitive to section height.

If the section gets too tall, the images will start to come apart from each other.

Putting too much content in the section will cause the section to get too tall. Another thing that can make the section too tall is choosing a narrow website width.

There are always tradeoffs in web design. If you want to use this section, we recommend a website width of at least 1280px and a content length roughly equal to the example content in the frame screenshot.

You can make additional tweaks to account for any issues, such as adjusting the grid’s gap, playing with image height, adjusting the offsets and overlap amounts, changing the grid ratio, etc.

Since this frame depends on factors outside of our control, the user is expected to make any necessary adjustments to the frame in a real-world scenario.
Is there a hack for supporting longer content in this frame?
Why, yes there is!

You’ll lose the section overlap with this hack, but you’ll retain the image overlap and proper image alignment.

When very long content is put in this section, the images will come apart from each other. This is because they’re instructed to overlap the top and bottom of the section no matter what.

You can override this behavior by changing the --image-block-offset variable to a negative number. Find a negative number that gives you the image alignment you’re looking for based on your content length.

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