Europa Component Library

Width

Documentation • Demo

Width utilities

You can use these utilities to quickly set the width of an element. It can also be defined for a specific breakpoint.

See examples for all possible use.

<h3 class="ecl-headin ecl-heading--ema-h3">Global classes</h3>
<div class="example ema-u-width-auto">ema-u-width-auto</div>
<div class="example ema-u-width-100">ema-u-width-100</div>

<h3 class="ecl-headin ecl-heading--ema-h3">Responsive classes</h3>
<div class="example ema-u-width-sm-100">ema-u-width-sm-100</div>
<div class="example ema-u-width-md-100">ema-u-width-md-100</div>
<div class="example ema-u-width-lg-100">ema-u-width-lg-100</div>
<div class="example ema-u-width-xl-100">ema-u-width-xl-100</div>

<style type="text/css">
  body {
    margin: 2rem;
  }
  .example {
    display: inline-block;
    padding: 1rem;
    text-align: center;
    background-color: #404040;
    color: #fff;
  }
</style>
 
/* No context defined for this component. */
 
<h3 class="ecl-headin ecl-heading--ema-h3">Global classes</h3>
<div class="example ema-u-width-auto">ema-u-width-auto</div>
<div class="example ema-u-width-100">ema-u-width-100</div>

<h3 class="ecl-headin ecl-heading--ema-h3">Responsive classes</h3>
<div class="example ema-u-width-sm-100">ema-u-width-sm-100</div>
<div class="example ema-u-width-md-100">ema-u-width-md-100</div>
<div class="example ema-u-width-lg-100">ema-u-width-lg-100</div>
<div class="example ema-u-width-xl-100">ema-u-width-xl-100</div>

<style type="text/css">
  body {
    margin: 2rem;
  }

  .example {
    display: inline-block;
    padding: 1rem;
    text-align: center;
    background-color: #404040;
    color: #fff;
  }
</style>
  • Content: 
    /*
  EMA Width
  ===========
*/

@each $breakpoint in map-keys($ecl-grid-breakpoints) {
  @include ecl-media-breakpoint-up($breakpoint) {
    $infix: ecl-breakpoint-infix($breakpoint, $ecl-grid-breakpoints);

    .ema-u-width#{$infix}-auto {
      width: auto;
    }

    .ema-u-width#{$infix}-100 {
      width: 100%;
    }

    .ema-u-width#{$infix}-grow-1 {
      flex-grow: 1;
    }

    .ema-u-width#{$infix}-grow-0 {
      flex-grow: 0;
    }

    .ema-u-width#{$infix}-nowrap {
      white-space: nowrap;
    }
  }
}
  • URL: /components/raw/ema-u-width/ema-u-width.scss
  • Filesystem Path: framework/utilities/ema-u-width/ema-u-width.scss
  • Size: 524 Bytes