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.
Examples
Default styling
This is an example of an inline link, this will be the same for all coloured links above.
.link--small
Small - The font size is 16px and line height is 26px. Border / underline is 4px.
This is an example of an inline link, this will be the same for all coloured links above.
Markup: components/links/links.twig
<p>
<a class="link {{modifier_class}}" href="#">
Link
</a>
</p>
<p>
This is an example of an <a class="link {{modifier_class}} inline">inline link</a>, this will be the same for all coloured links above.
</p>
Source:
_shop18-styleguide.scss
, line 15