Europa Component Library

Ratio

Documentation • Demo

Ratio utilities

You can use these utilities to quickly set a ratio for a block or a video. Just add the corresponding class to a wrapper element.

List of possible ratio:

  • .ecl-u-ratio-16-9: 16/9 ratio
  • .ecl-u-ratio-4-3: 4/3 ratio
<style type="text/css">
  .example {
    background-color: #000;
    max-width: 50%;
  }

  .example__content span{
    color: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<h3 class="ecl-heading ecl-heading--h3">16/9 ratio</h3>
<div class="ecl-u-ratio-16-9 example">
  <div class="example__content">
    <span>16/9</span>
  </div>
</div>

<h3 class="ecl-heading ecl-heading--h3">4/3 ratio</h3>
<div class="ecl-u-ratio-4-3 example">
  <div class="example__content">
    <span>4/3</span>
  </div>
</div>
 
/* No context defined for this component. */
 
<style type="text/css">
  .example {
    background-color: #000;
    max-width: 50%;
  }

  .example__content span {
    color: #fff;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<h3 class="ecl-heading ecl-heading--h3">16/9 ratio</h3>
<div class="ecl-u-ratio-16-9 example">
  <div class="example__content">
    <span>16/9</span>
  </div>
</div>

<h3 class="ecl-heading ecl-heading--h3">4/3 ratio</h3>
<div class="ecl-u-ratio-4-3 example">
  <div class="example__content">
    <span>4/3</span>
  </div>
</div>
  • Content: 
    /**
 * Ratio utilities
 * @define ratio
 */

@mixin ecl-aspect-ratio($width, $height) {
  position: relative;

  /* stylelint-disable-next-line */
  &::before {
    content: '';
    display: block;
    padding-top: ($height / $width) * 100%;
    width: 100%;
  }

  /* stylelint-disable-next-line */
  > .content {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.ecl-u-ratio-16-9 {
  @include ecl-aspect-ratio(16, 9);
}

.ecl-u-ratio-4-3 {
  @include ecl-aspect-ratio(4, 3);
}
  • URL: /components/raw/ecl-u-ratio/ecl-u-ratio.scss
  • Filesystem Path: framework/utilities/ecl-u-ratio/ecl-u-ratio.scss
  • Size: 515 Bytes