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