Content Section Foxtrot
overview
A two-column content section with angled images that break out above and below the section container.
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.
Variables
Sets top and bottom padding on the section and images
Aspect Ratio of the images
Width of the images
Vertical offset between images
Horizontal offset between images
Rotates the images by value
HTML5 Tags & Attributes
Accessibility Notes
Related Frames
No related frames.
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.