Europa Component Library

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

Additional fonts utilities:

  • ecl-u-f-up: Uppercase text

For more information, see the wiki page

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

<p>
  <span class="ecl-u-f-up">ecl-u-f-up</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>

<p>
  <span class="ecl-u-f-up">ecl-u-f-up</span>
</p>
  • Content:
    /*
      ECL Font size
      ===========
    
      Base:
        fs = font size
    */
    
    @each $key, $value in $ecl-font-size {
      .ecl-u-fs-#{$key} {
        font-size: $value;
      }
    }
    
    .ecl-u-f-up {
      text-transform: uppercase;
    }
    
  • URL: /components/raw/ecl-u-font-size/ecl-u-font-size.scss
  • Filesystem Path: framework/utilities/ecl-u-font-size/ecl-u-font-size.scss
  • Size: 201 Bytes
  • Handle: @ec-europa/ecl-u-font-size
  • Preview:
  • Filesystem Path: framework/utilities/ecl-u-font-size/ecl-u-font-size.twig