Code Examples

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.


  • 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.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("link-1", "link-2", "link-3", etc).

Configurable Variables

Variable Default Description
$link-color $black The default link color.
$link-disabled-color $black-tint-50 The disabled link color.
$link-muted-color $black-tint-75 The muted link color.
$link-standalone-color $red The standalone link color.
$link-transition 0.3s The transition timing for hover, active and focus style application.
$link-underline-color $red Sets the color of the link underline.
$link-underline-visited-color $red Sets the color of the link underline on visited links.
$link-underline-width 0.0625em Sets the size of the link underline.
$link-visited-color $red-mid Sets the color of visited links.
$link-standalone-font-weight bold The font weight for standalone links.
$link-inline-font-weight normal The font weight for inline links.
$link-disabled-font-weight bold The font weight for disabled links.

Class Modifiers

Class Description
.sprk-b-Link--standalone Sets the styles for the standalone link variant.
.sprk-b-Link--muted Sets the color styles for the muted link variant.
.sprk-b-Link--plain Removes the underline from links on initial state and on hover, active, focus, and visited states.
.sprk-b-Link--disabled Sets the styles for disabled links.


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" data-id="link-1" data-analytics="object.action.event">Inline</a>
<sprk-link href="#" idString="link-1" analyticsString="object.action.event">


See below for available customization options:

Input Type Description
linkType string Can be 'standalone', 'plain', or 'disabled'. Will cause the appropriate variant type to render.
href string The URL of the link.
analyticsString string The string that will be assigned to the data-analytics attribute of the link.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.
target string Expects a value to assign to the target attribute of the link.
additionalClasses string Expects a space-separated list of classes to append to the class attribute of the sprk-award component.

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" data-id="link-2" data-analytics="object.action.event">Standalone Link</a>
<sprk-link linkType="standalone" href="#" idString="link-2" analyticsString="object.action.event">
  Standalone Link


The customization options available for the inline variant are also available for standalone links.

This is the link and icon style to use when there is an icon with description text. You may change the size of the icon by adjusting the icon modifier class that is on the svg element.

<a class="sprk-b-Link sprk-b-Link--plain" href="#nogo" data-id="link-1" data-analytics="object.action.event">
  <svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs sprk-c-Icon--current-color" viewBox="0 0 100 100">
    <use xlink:href="#communication" />

  Message Us
<sprk-link linkType="plain" href="#" idString="link-3" analyticsString="object.action.event">
  <sprk-icon iconType="communication" additionalClasses="sprk-c-Icon--l sprk-c-Icon--current-color sprk-u-mrs"></sprk-icon>
  Message Us


The customization options available for the inline variant are also available for the icon with text links.


These have a muted color and are not clickable.

<a class="sprk-b-Link sprk-b-Link--disabled" href="#nogo" data-id="link-3" data-analytics="object.action.event">Disabled</a>
<sprk-link linkType="disabled" href="#" idString="link-4" analyticsString="object.action.event">


The customization options available for the inline variant are also available for disabled links.