EC System

Font size

Documentation • Demo

Font size utilities

Use the following classes to quickly set a font size:

  • ecl-u-fs-xxl: Extra extra large text
  • ecl-u-fs-xl: Extra large text
  • ecl-u-fs-l: Large text
  • ecl-u-fs-m: Medium text
  • ecl-u-fs-s: Small text
  • ecl-u-fs-xs: Extra small text
  • ecl-u-fs-xxs: Extra extra small text
<p>
  <span class="ecl-u-fs-xxl">ecl-u-fs-xxl</span><br/>
  <span class="ecl-u-fs-xl">ecl-u-fs-xl</span><br/>
  <span class="ecl-u-fs-l">ecl-u-fs-l</span><br/>
  <span class="ecl-u-fs-m">ecl-u-fs-m</span><br/>
  <span class="ecl-u-fs-s">ecl-u-fs-s</span><br/>
  <span class="ecl-u-fs-xs">ecl-u-fs-xs</span><br />
  <span class="ecl-u-fs-xxs">ecl-u-fs-xxs</span>
</p>
 
/* No context defined for this component. */
 
<p>
  <span class="ecl-u-fs-xxl">ecl-u-fs-xxl</span><br />
  <span class="ecl-u-fs-xl">ecl-u-fs-xl</span><br />
  <span class="ecl-u-fs-l">ecl-u-fs-l</span><br />
  <span class="ecl-u-fs-m">ecl-u-fs-m</span><br />
  <span class="ecl-u-fs-s">ecl-u-fs-s</span><br />
  <span class="ecl-u-fs-xs">ecl-u-fs-xs</span><br />
  <span class="ecl-u-fs-xxs">ecl-u-fs-xxs</span>
</p>
  • Content: 
    /**
 * Font size utilities
 */

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

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