Links

Toggle example guides Toggle HTML markup

Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate. Buttons text uses the Bold weight of the Proxima Nova font. All buttons

Examples
Default styling

Link

This is an example of an inline link, this will be the same for all coloured links above.

.link--large
Large - The font size is 18px and line height is 28px. Border / underline is 4px.

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.

:hover
Link hover state

Link

This is an example of an inline link, this will be the same for all coloured links above.

:active
Link active state

Link

This is an example of an inline link, this will be the same for all coloured links above.

:focus
Link focus state

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: _rnd17-styleguide.scss, line 16