Frame

The frame layout helper is useful for cropping media (images and video) to a specific aspect ratio. It uses the class l-frame and CSS custom properties to allow you to override the default 16:9 aspect ratio. Adding the data-shape="circle" data-attribute will crop the image as a circle.

CSS custom properties

--frame-x

Override the default x-axis part of the aspect ratio, which is set to 16.

--frame-y

Override the default y-axis part of the aspect ratio, which is set to 9.

Considerations

Figure/figcaption use

If using figure with figcaption, make sure to apply the l-frame class to an inner div or picture rather than directly to the figure, to avoid obscuring the figcaption.