Image Group Echo

overview

A grid-based group of three overlapping images with a centered featured image.

Style Preview

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Image Group Echo is an overlapping element consisting of three images. It’s created with CSS Grid, so it can conform to any container without breaking.

The aspect ratio of the images, amount of overlap, and center image shadow are easily editable with simple pre-made variables.

Additionally, you can change the behavior of individual images by styling the IDs of each image or you can change all three images at once using the BEM class attached to each image.

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.

--aspect-width

Sets aspect ratio width of each image.

--aspect-height

Sets aspect ratio height of each image.

--overlap

Sets the amount of vertical overlap (center image)

--alignment

Align images to top, center, or bottom of container.

--shadow

Controls the center image shadow styling.

HTML5 Tags & Attributes

figure

Accessibility Notes

No additional accessibility notes for this frame.

Related Frames

No related frames.

FAQs

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