Highlight

Basic styles for text highlight.

highlight-color

<span class="evo-highlight highlight-color">Pack my box with five dozen liquor jugs.</span>

Create a <span> tag to contain your text, and apply the evo-highlight class followed by highlight-color. Combined with other style classes for font, color, and background color. Global ::selection styles are set in _global.scss. Selection and highlight styles can be adjusted from _evo_variables.scss.

inverse-highlight-color

<span class="evo-highlight inverse-highlight-color">Pack my box with five dozen liquor jugs.</span>

highlight-black

<span class="evo-highlight highlight-black">Pack my box with five dozen liquor jugs.</span>

highlight-white

<span class="evo-highlight highlight-white">Pack my box with five dozen liquor jugs.</span>

Highlight Examples

A designer knows she has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.

<blockquote class="evo-color-bg padding-top-10 padding-bottom-10 padding-right-10 padding-left-1 text-measure-5"><span class="evo-highlight highlight-white">A designer knows she has achieved perfection...</span></blockquote>

More examples can be found on the quote page.

<span class="evo-highlight evo-selection">Highlight colored by the selection.</span>

Optionally, apply evo-highlight followed by the evo-selection class to use the global selection style for color.