Within Cauldron, we use links almost exclusively as navigable elements. Whether it's to launch a modal or drill into another page, links are the primary pattern to use.

Quick look

A couple things to keep in mind when using links:

  1. Links primarily used for navigation.
  2. Make sure there is adequate line height/spacing for links--their :focus should not touch the text above or below. Note: you should be using the .line-height variable inside the pattern library.

Try it out

Standalone links

This is how you style a link when it's not in context with text immediately infront or behind it. You would use this style for things like "Forgot password?" or "more information".

Links inside a paragraph

This is how links are styled when they are in context of the text around them. While they are slightly aesthetically different from standalone links, they share many similarities such as :hover and :focus.

Code samples

<a class="dqpl-link" href="#">Standalone link</a>
<p>This is a paragraph with a<a class="dqpl-link" href="#">link</a>within it.</p>

For more information on implementation read thewiki.