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/ec-base/ec-base'; @import '@ecl/generic-utility-text/generic-utility-text'; // Use generic mixin @include exports('ec-utility-text') { @include ecl-utility-text(); }
- URL: /components/raw/ec-utility-text/ec-utility-text.scss
- Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-text/ec-utility-text.scss
- Size: 237 Bytes
- Handle: @ecl/ec-utility-text
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-text/ec-utility-text.twig