Evo

Text Bevel

Hard bevels for text. Unfortunately bevels are difficult to construct using only utility classes, so these are more hard-coded than other elements. You can adjust bevel colors and some other variables within _evo_variables.scss.

text-bevel

bevel

<h1 class="text-bevel">bevel</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply the text-bevel class. Global style is defined in _evo_variables.scss

bevel

<h1 class="text-bevel-inverse">bevel</h1>

On dark backgrounds, apply the text-bevel-inverse class for a light colored bevel. Global style is defined in _evo_variables.scss

text-bevel-[thickness]

bevel

<h1 class="text-bevel-thin">bevel</h1>

bevel

<h1 class="text-bevel-medium">bevel</h1>

bevel

<h1 class="text-bevel-thick">bevel</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply the text-bevel class. Global style is defined in _evo_variables.scss

bevel

<h1 class="text-bevel-thin-inverse">bevel</h1>

bevel

<h1 class="text-bevel-medium-inverse">bevel</h1>

bevel

<h1 class="text-bevel-thick-inverse">bevel</h1>

On dark backgrounds, apply the text-bevel-inverse class for a light colored bevel. Global style is defined in _evo_variables.scss

text-bevel-[number]

text-bevel-1

bevel

text-bevel-2

bevel

text-bevel-3

bevel

text-bevel-4

bevel

text-bevel-5

bevel

text-bevel-6

bevel

text-bevel-7

bevel

text-bevel-8

bevel

text-bevel-9

bevel

text-bevel-10

bevel

text-bevel-11

bevel

text-bevel-12

bevel

text-bevel-13

bevel

text-bevel-14

bevel

text-bevel-15

bevel

text-bevel-16

bevel

text-bevel-17

bevel

text-bevel-18

bevel

text-bevel-19

bevel

text-bevel-20

bevel

<h1 class="text-bevel-20">bevel</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-bevel-[number] class such as text-bevel-20. Global style is defined in _evo_variables.scss

inverse-text-bevel-[number]

inverse-text-bevel-1

bevel

inverse-text-bevel-2

bevel

inverse-text-bevel-3

bevel

inverse-text-bevel-4

bevel

inverse-text-bevel-5

bevel

inverse-text-bevel-6

bevel

inverse-text-bevel-7

bevel

inverse-text-bevel-8

bevel

inverse-text-bevel-9

bevel

inverse-text-bevel-10

bevel

inverse-text-bevel-11

bevel

inverse-text-bevel-12

bevel

inverse-text-bevel-13

bevel

inverse-text-bevel-14

bevel

inverse-text-bevel-15

bevel

inverse-text-bevel-16

bevel

inverse-text-bevel-17

bevel

inverse-text-bevel-18

bevel

inverse-text-bevel-19

bevel

inverse-text-bevel-20

bevel

<h1 class="inverse-text-bevel-20">bevel</h1>

Create a container for your text such as a <p> tag or <h1> tag, and apply an inverse-text-bevel-[number] class such as inverse-text-bevel-20. Global style is defined in _evo_variables.scss