Links

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.

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

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

Information

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
</sprk-link>

Information

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" />
  </svg>

  Message Us
</a>
          
<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
</sprk-link>

Information

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

Disabled

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">
  Disabled
</sprk-link>

Information

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