Links

Link Styles

Classic

With Icon

Code Example Shortcut: z-link-default, link-reverse, link-classic, link-icon

<a>Default</a>
<a class="link-reverse">Reverse</a>
<a class="link-classic">Classic</a>
<a>With Icon <i class="zenicon-east"></i></a>

Animated Link

Hover Me

Code Example Shortcut: z-link-animated, link-animated-dark

<a class="text-cta-dual link-underline">Hover<i class="zenicon-east down-2"></i></a>
<a class="text-cta-dual link-underline link-underline-white">Hover<i class="zenicon-east down-2"></i></a>

Bottom of card Link

View Now

Code Example Shortcut: z-link-bottom

<div class="card-bottom">
  <a class="text-cta-dual link-underline">Click <i class="zenicon-east down-2"></i></a>
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.