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

Link

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.

Link

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