Text

Change the style of text. Styles controlled are font-size, color, font-family, font-weight, line-height, letter-spacing, ad text-rendering. Place the evo-text tag first before other structural classes that include text-size-10 which modifies sizes, or text-leading-10 which modifies line-height. Leave out the evo-text class if you prefer to modify styles using a class such as color-10.

evo-text

Experience Design Made Simple for living design systems

<p class="evo-text"></p>

Create a <p> tag, and apply the css class evo-text. Text styles can be adjusted in _evo_variables.scss.

text-inverse

<p class="evo-text text-inverse"></p>

Create a <p> tag, and apply the css class evo-text followed by text-inverse. Using only the text-inverse tag will simply apply the inverse color from _evo_variables.scss.

p

paragraph of copy here... lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>paragraph of copy here...</p>

Create a <p> tag. <p> tags set the global text color and margin-top plus margin-bottom padding. To cancel out the default margin-bottom setting, use the margin-bottom-0 class. <p> tag styles can be adjusted in _evo_variables.scss.

H

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

<h1>H1 header</h1>

Create an <h1> tag. This controls font-size, line-height, letter-spacing, and margin-bottom. Text styles can be adjusted in _evo_variables.scss.

H1 header with H3 class

<h1 class="h3">H1 header with H3 style</h1>

You can also apply a header style, such as the h3 class, to directly to any H tag. For example, create an <h1> tag and apply the h3 class. The <h1> tag retains the semantic hierarchy information, but now displays the h3 class styling.

text-reset

This sentence demonstrates the reset of styles.

<p class="text-reset">This sentence demonstrates the reset of styles.</hp>

Use the text-reset class to remove text styles.

Text Examples

The best revenge is massive success.

<p class="font-arial-black evo-color text-size-10 text-tracking-2 text-leading-5 text-uppercase text-center text-measure-3 text-bevel-3 text-line-under">The best revenge is massive success.</hp>

Take up one idea. Make that one idea your life–think of it, dream of it, live on that idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone. This is the way to success. –Swami Vivekananda

<p class="font-times-new font-italic text-size-4 text-leading-10 text-measure-5 text-measure-4">Take up one idea...</hp>