Text Style

Change the style of text.

text-[align]

text-left

Left Experience Design Made Simple for Living Design Systems

text-center

Center Experience Design Made Simple for Living Design Systems

text-right

Right Experience Design Made Simple for Living Design Systems

text-[capcase]

text-capitalize

Capitalize Experience Design Made Simple for Living Design Systems

text-uppercase

Uppercase Experience Design Made Simple for Living Design Systems

text-lowercase

Lowercase Experience Design Made Simple for Living Design Systems

text-capcase-none

No-Case Experience Design Made Simple for Living Design Systems

text-[line]

text-line-over

Overline Experience Design Made Simple for Living Design Systems

text-line-middle

Strikeline Experience Design Made Simple for Living Design Systems

text-line-under

Underline Experience Design Made Simple for Living Design Systems

text-line-over-under

Over Under Lines Experience Design Made Simple for Living Design Systems

text-line-all

All lines Experience Design Made Simple for Living Design Systems

text-line-none

No-Line Experience Design Made Simple for Living Design Systems

text-[overflow]

text-truncate evo-measure-4

Truncate Experience Design Made Simple for Living Design Systems

text-clip evo-measure-4

Clip Experience Design Made Simple for Living Design Systems

Create an html tag to hold the text, such as <p> or <h1>, and apply the css class evo-text, followed by an text-[style] class. Styles will apply even without the evo-text class.


   <p class="evo-text text-bold"></p>
   <p class="evo-text text-italic"></p>
   <p class="evo-text text-capitalize"></p>
   <p class="evo-text text-uppercase"></p>
   <p class="evo-text text-lowercase"></p>
   <p class="evo-text text-strike"></p>
   <p class="evo-text text-underline"></p>
   <p class="evo-text text-no-underline"></p>
   <p class="evo-text text-no-transform"></p>
   <p class="evo-text text-truncate"></p>
   <p class="evo-text text-clip"></p>
   <p class="evo-text text-left"></p>
   <p class="evo-text text-center"></p>
   <p class="evo-text text-right"></p>