Text Style
Change the style of text.
text-[align]
text-leftLeft Experience Design Made Simple for Living Design Systems
text-centerCenter Experience Design Made Simple for Living Design Systems
text-rightRight Experience Design Made Simple for Living Design Systems
text-[capcase]
text-capitalizeCapitalize Experience Design Made Simple for Living Design Systems
text-uppercaseUppercase Experience Design Made Simple for Living Design Systems
text-lowercaseLowercase Experience Design Made Simple for Living Design Systems
text-capcase-noneNo-Case Experience Design Made Simple for Living Design Systems
text-[line]
text-line-overOverline Experience Design Made Simple for Living Design Systems
text-line-middleStrikeline Experience Design Made Simple for Living Design Systems
text-line-underUnderline Experience Design Made Simple for Living Design Systems
text-line-over-underOver Under Lines Experience Design Made Simple for Living Design Systems
text-line-allAll lines Experience Design Made Simple for Living Design Systems
text-line-noneNo-Line Experience Design Made Simple for Living Design Systems
text-[overflow]
text-truncate evo-measure-4Truncate Experience Design Made Simple for Living Design Systems
text-clip evo-measure-4Clip 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>