Links

Text links should take the user to a new place or change the view the user is on. Links use the medium blue brand color for their idle and hover states while using the dark blue brand color for the visited state.

Restrictions

  • Do not use Spark Link classes on links that solely have images in them.
  • Link text should be as meaningful as possible so users can understand what the purpose of the link is.

Inline

These are the standard link type. They appear within a block of content. They inherit the font family, size, weight, and line height of the block of content that they appear in.

<a class="sprk-b-Link" href="#nogo">Inline</a>

These are generally used when they are not part of a body of text. For example, a list of secondary navigation links in the footer or a cancel action next to a submit button. Standalone links use the base font family, size, weight, and line height.

<a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">Standalone Link</a>

Disabled

These have a muted color and are not clickable.

<a class="sprk-b-Link sprk-b-Link--disabled" href="#nogo">Disabled</a>