Europa Component Library

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: 
    /*
  ECL Text
  ===========
*/

.ecl-u-text-capitalize {
  text-transform: capitalize;
}
.ecl-u-text-lowercase {
  text-transform: lowercase;
}
.ecl-u-text-uppercase {
  text-transform: uppercase;
}
.ecl-u-text-overline {
  text-decoration: overline;
}
.ecl-u-text-underline {
  text-decoration: underline;
}
.ecl-u-text-strike {
  text-decoration: line-through;
}
.ecl-u-text-none {
  text-decoration: none;
}
  • URL: /components/raw/ecl-u-text/ecl-u-text.scss
  • Filesystem Path: framework/utilities/ecl-u-text/ecl-u-text.scss
  • Size: 411 Bytes