EC System

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
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-utility-ratio/generic-utility-ratio';

// Use generic mixin
@include exports('ec-utility-ratio') {
  @include ecl-utility-ratio();
}
  • URL: /components/raw/ec-utility-ratio/ec-utility-ratio.scss
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-ratio/ec-utility-ratio.scss
  • Size: 242 Bytes
  • Handle: @ecl/ec-utility-ratio
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-ratio/ec-utility-ratio.twig