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.
A couple things to keep in mind when using links:
- Links primarily used for navigation.
- 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 linksThis 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.
<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.