Links
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.
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
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>
_cr17-styleguide.scss, line 15