Links

Toggle example guides Toggle HTML markup

Links are used for call-to-actions that are lower in the hierachy and aren’t as key as ones used in buttons. They can also be used for call-to-actions with a longer character count.

Examples
Default styling

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Black link .link--black Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

Inline Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue inline link, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue

.link--small
Small - The font size is 16px and line height is 26px. Border / underline is 4px.

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Black link .link--black Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

Inline Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue inline link, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue

Markup: components/links/links.twig
<p>
	<a class="link link--dark-purple" href="#">Dark purple link</a> <i>.link-dark-purple</i> Look over here, son
</p>
<p>
	<a class="link link--red" href="#">Red link</a> <i>.link-red</i> Look over here, son
</p>
<p>
	<a class="link link--royal-blue" href="#">Royal Blue link</a> <i>.link-royal-blue</i> Look over here, son
</p>
<p>
	<a class="link link--purple" href="#">Purple link</a> <i>.link--purple</i> Look over here, son
</p>
<p>
	<a class="link link--black" href="#">Black link</a> <i>.link--black</i> Look over here, son
</p>
<p class="font--white bg--black" style="padding: 5px;">
	<a class="link link--mint-green" href="#">Mint Green</a> <i>.link-mint-green</i> Look over here, son
</p>
<p class="font--white bg--black" style="padding: 5px;">
	<a class="link link--white" href="#">White link</a> <i>.link--white</i> Look over here, son
</p>
<p class="font--white bg--black" style="padding: 5px;">
	<a class="link link--grey" href="#">Grey link</a> <i>.link--grey</i> Look over here, son
</p>
<h3 style="margin-top: 30px;">Inline Link</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue <a href="#" class="link link--dark-purple inline">inline link</a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue</p>
Source: _cr17-styleguide.scss, line 15