EU System

Text

Documentation • Demo

Text utilities

You can use these utilities to quickly change display of a block of text.

Available utilities are:

  • ecl-u-text-capitalize: Capitalized text
  • ecl-u-text-lowercase: Lowercased text
  • ecl-u-text-uppercase: Uppercased text
  • ecl-u-text-overline: Defines a line above the text
  • ecl-u-text-underline: Defines a line below the text
  • ecl-u-text-strike: Defines a line through the text
  • ecl-u-text-none: No style (default)
<p class="ecl-paragraph">
  <strong>.ecl-u-text-capitalize</strong><br />
  <span class="ecl-u-text-capitalize">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-lowercase</strong><br />
  <span class="ecl-u-text-lowercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-uppercase</strong><br />
  <span class="ecl-u-text-uppercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-overline</strong><br />
  <span class="ecl-u-text-overline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-underline</strong><br />
  <span class="ecl-u-text-underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-strike</strong><br />
  <span class="ecl-u-text-strike">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-none</strong><br />
  <span class="ecl-u-text-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>
 
/* No context defined for this component. */
 
<p class="ecl-paragraph">
  <strong>.ecl-u-text-capitalize</strong><br />
  <span class="ecl-u-text-capitalize">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-lowercase</strong><br />
  <span class="ecl-u-text-lowercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-uppercase</strong><br />
  <span class="ecl-u-text-uppercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-overline</strong><br />
  <span class="ecl-u-text-overline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-underline</strong><br />
  <span class="ecl-u-text-underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-strike</strong><br />
  <span class="ecl-u-text-strike">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>

<p class="ecl-paragraph">
  <strong>.ecl-u-text-none</strong><br />
  <span class="ecl-u-text-none">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>
  • Content: 
    /**
 * Text utilities
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-utility-text/generic-utility-text';

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