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).


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' 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.
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.


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-3" analyticsString="object.action.event">


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