Utilities

Media

Examples display media using img tag on the left and background-image on the right.

Media sizes

exampleecl-u-media-a-s
ecl-u-media-a-s
exampleecl-u-media-a-m
ecl-u-media-a-m
Fullscreen

Try it yourself on the playground

Playground

Horizontal size only

exampleecl-u-media-h-s
ecl-u-media-h-s
exampleecl-u-media-h-m
ecl-u-media-h-m
Fullscreen

Try it yourself on the playground

Playground

Vertical size only

exampleecl-u-media-v-s
ecl-u-media-v-s
exampleecl-u-media-v-m
ecl-u-media-v-m
Fullscreen

Try it yourself on the playground

Playground

Responsive size

Add the breakpoint before media size to display it only with corresponding screen size (works for all kind of size ahead).

Examples:

  • media m on screen size >= breakpoint md, and s otherwise:
    ecl-u-media-a-s ecl-u-media-a-md-m
  • horizontal size m on screen size >= breakpoint lg, and s otherwise:
    ecl-u-media-h-s ecl-u-media-h-lg-m

Ratio

To set ratio of an image, wrap it with a ratio class and add class ecl-u-media-content to the image.
The width has to be set using media utilities ahead.

Important: when using ratio, media size and margin/padding have to be put on the ratio wrapper, not on the media itself.

example
ecl-u-media-ratio-16-9
ecl-u-media-ratio-16-9
example
ecl-u-media-ratio-4-3
ecl-u-media-ratio-4-3
example
ecl-u-media-ratio-3-2
ecl-u-media-ratio-3-2
example
ecl-u-media-ratio-1-1
ecl-u-media-ratio-1-1
Fullscreen

Try it yourself on the playground

Playground

Background image

There are several classes that can be used to manage how the background image is displayed.
CSS properties that can be altered are:

  • background-origin
  • background-position
  • background-repeat
  • background-size

Check the playground to see possible combinations.
Here are some examples:

ecl-u-media-bg-position-center

ecl-u-media-bg-repeat-none, ecl-u-media-bg-size-contain

ecl-u-media-bg-position-center, ecl-u-media-bg-repeat-none, ecl-u-media-bg-size-cover

Fullscreen

Try it yourself on the playground

Playground