We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Media Helpers

Layout support for media items

Aspect Ratios ( w : h )

.media__ratio--square
1 : 1
.media__ratio--full
4 : 3
.media__ratio--frame
3 : 2
.media__ratio--wide
16 : 9
.media__ratio--double
2 : 1
.media__ratio--triple
3 : 1
.media__ratio--triple-triple
3.75 : 1
.media__ratio--quad
4 : 1
.media__ratio--quad-double
4.5 : 1

Object Fit

.media__fit--fill
.media__fit--contain
.media__fit--cover
.media__fit--none
.media__fit--scale-down

Media Bleed

.media__bleed--full
.media__bleed--right.media__bleed--half
.media__bleed--left.media__bleed--half

Using these classes

These classes will fill available container width and include these styles in addition to the ratios.

.{class} {
    width: 100%;
    object-fit: cover;
}
The ratio class should be added to the media asset directly.