PatternLab

Links

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

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.

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.

:hover

Link hover state

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

:active

Link active state

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

:focus

Link focus state

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