Media - Utilities

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

Media sizes

ecl-u-media-a-s

ecl-u-media-a-m

<div class="demo-media-line">
  <div class="demo-media-container-left"><img src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
      alt="example" class="ecl-u-media-a-s" /><span>ecl-u-media-a-s</span></div>
  <div class="demo-media-container-right">
    <div class="demo-media-content ecl-u-media-a-s"></div><span>ecl-u-media-a-s</span>
  </div>
</div>
<div class="demo-media-line">
  <div class="demo-media-container-left"><img src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
      alt="example" class="ecl-u-media-a-m" /><span>ecl-u-media-a-m</span></div>
  <div class="demo-media-container-right">
    <div class="demo-media-content ecl-u-media-a-m"></div><span>ecl-u-media-a-m</span>
  </div>
</div>

Try it yourself on the playground

Playground

Horizontal size only

ecl-u-media-h-s

ecl-u-media-h-m

Fullscreen

<div class="demo-media-line">
  <div class="demo-media-container-left"><img src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
      alt="example" class="ecl-u-media-h-s" /><span>ecl-u-media-h-s</span></div>
  <div class="demo-media-container-right">
    <div class="demo-media-content ecl-u-media-h-s"></div><span>ecl-u-media-h-s</span>
  </div>
</div>
<div class="demo-media-line">
  <div class="demo-media-container-left"><img src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
      alt="example" class="ecl-u-media-h-m" /><span>ecl-u-media-h-m</span></div>
  <div class="demo-media-container-right">
    <div class="demo-media-content ecl-u-media-h-m"></div><span>ecl-u-media-h-m</span>
  </div>
</div>

Try it yourself on the playground

Playground

Vertical size only

ecl-u-media-v-s

ecl-u-media-v-m

Fullscreen

<div class="demo-media-line">
  <div class="demo-media-container-left"><img src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
      alt="example" class="ecl-u-media-v-s" /><span>ecl-u-media-v-s</span></div>
  <div class="demo-media-container-right">
    <div class="demo-media-content ecl-u-media-v-s"></div><span>ecl-u-media-v-s</span>
  </div>
</div>
<div class="demo-media-line">
  <div class="demo-media-container-left"><img src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
      alt="example" class="ecl-u-media-v-m" /><span>ecl-u-media-v-m</span></div>
  <div class="demo-media-container-right">
    <div class="demo-media-content ecl-u-media-v-m"></div><span>ecl-u-media-v-m</span>
  </div>
</div>

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.

ecl-u-media-ratio-16-9

ecl-u-media-ratio-4-3

ecl-u-media-ratio-3-2

ecl-u-media-ratio-1-1

Fullscreen

<div class="demo-media-line">
  <div class="demo-media-container-left">
    <div class="ecl-u-media-ratio-16-9 ecl-u-media-h-m"><img
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg" alt="example"
        class="ecl-u-media-content" /></div><span>ecl-u-media-ratio-16-9</span>
  </div>
  <div class="demo-media-container-right">
    <div class="ecl-u-media-ratio-16-9 ecl-u-media-h-m">
      <div class="demo-media-content ecl-u-media-content"></div>
    </div><span>ecl-u-media-ratio-16-9</span>
  </div>
</div>
<div class="demo-media-line">
  <div class="demo-media-container-left">
    <div class="ecl-u-media-ratio-4-3 ecl-u-media-h-m"><img
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg" alt="example"
        class="ecl-u-media-content" /></div><span>ecl-u-media-ratio-4-3</span>
  </div>
  <div class="demo-media-container-right">
    <div class="ecl-u-media-ratio-4-3 ecl-u-media-h-m">
      <div class="demo-media-content ecl-u-media-content"></div>
    </div><span>ecl-u-media-ratio-4-3</span>
  </div>
</div>
<div class="demo-media-line">
  <div class="demo-media-container-left">
    <div class="ecl-u-media-ratio-3-2 ecl-u-media-h-m"><img
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg" alt="example"
        class="ecl-u-media-content" /></div><span>ecl-u-media-ratio-3-2</span>
  </div>
  <div class="demo-media-container-right">
    <div class="ecl-u-media-ratio-3-2 ecl-u-media-h-m">
      <div class="demo-media-content ecl-u-media-content"></div>
    </div><span>ecl-u-media-ratio-3-2</span>
  </div>
</div>
<div class="demo-media-line">
  <div class="demo-media-container-left">
    <div class="ecl-u-media-ratio-1-1 ecl-u-media-h-m"><img
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg" alt="example"
        class="ecl-u-media-content" /></div><span>ecl-u-media-ratio-1-1</span>
  </div>
  <div class="demo-media-container-right">
    <div class="ecl-u-media-ratio-1-1 ecl-u-media-h-m">
      <div class="demo-media-content ecl-u-media-content"></div>
    </div><span>ecl-u-media-ratio-1-1</span>
  </div>
</div>

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

<div class="demo-media-bg ecl-u-media-a-m ecl-u-media-bg-position-center"></div><span
  class="ecl-u-type-m">ecl-u-media-bg-position-center</span>
<div class="demo-media-bg ecl-u-media-a-m ecl-u-media-bg-repeat-none ecl-u-media-bg-size-contain"></div><span
  class="ecl-u-type-m">
  <p class="iRCJJeCgSXzX9ymLg1TH">ecl-u-media-bg-repeat-none, ecl-u-media-bg-size-contain</p>
</span>
<div
  class="demo-media-bg ecl-u-media-a-m ecl-u-media-bg-position-center ecl-u-media-bg-repeat-none ecl-u-media-bg-size-cover">
</div><span class="ecl-u-type-m">
  <p class="iRCJJeCgSXzX9ymLg1TH">ecl-u-media-bg-position-center, ecl-u-media-bg-repeat-none,
    ecl-u-media-bg-size-cover</p>
</span>

Try it yourself on the playground

Playground