Link

Basic link styles. For URL placeholders use <a href="#"> or <a href="javascript:void(0);">. NOTE: Don't forget to remove the URL placeholders when integrating the HTML into your CMS, such as wordpress.

Link

<a href="javascript:void(0);">Pack my box with five dozen liquor jugs.</a>

Global font styles are applied to the a tag, and other tags, set in _global.scss. You can also directly apply evo-link to an anchor tag. Styles can be adjusted from _evo_variables.scss.

<a href="javascript:void(0);" class="evo-link-inverse">Pack my box with five dozen liquor jugs.</a>

For inverse styles apply the evo-link-inverse class to an a tag. Inverse styles can be adjusted from _evo_variables.scss.

Link Paragraph

Pack my box with five dozen liquor jugs.

<p><a href="javascript:void(0);">Pack my box with five dozen liquor jugs.</a></p>

Global font styles are applied to a tags nested within p tags. You can also directly apply an evo-link class. Styles can be adjusted from _evo_variables.scss.

<p><a href="javascript:void(0);">Pack my box with five dozen liquor jugs.</a></p>

For inverse styles apply the evo-link-inverse class to an a tag nested within a p tag. Inverse styles can be adjusted from _evo_variables.scss.

Link States

<a class="a-hover">Pack my box with five dozen liquor jugs.</a>

If needed for demonstration purposes, apply a 'link state' class directly to an HTML a element or text to reveal the a:link, a:visited, a:hover, a:active, or a:focus pseudo style. Do not include the 'href='.

Inverse Link States

<a class="a-hover-inverse">Pack my box with five dozen liquor jugs.</a>

If needed for demonstration purposes, apply an 'inverse link state' class directly to an HTML a element or text to reveal the a:link, a:visited, a:hover, a:active, or a:focus pseudo style. Do not include the 'href='.