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

Configurable Variables

Variable Default Description
$sprk-link-transition 0.3s The transition timing for hover, active and focus style application.
$sprk-link-color $sprk-black The default link color.
$sprk-link-font-weight bold The default font weight for links.
$sprk-link-text-decoration none The default text decoration.
$sprk-link-underline-color $sprk-gray-dark Sets the color of the link underline.
$sprk-link-underline-width 0.09375em Sets the size of the link underline.
$sprk-link-border-bottom-style solid Sets the style for the link underline.
$sprk-link-border-bottom $sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-underline-color Sets the border settings for links
$sprk-link-hover-border-bottom $sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-hover-color Sets the style for the link underline on the hover state.
$sprk-link-hover-color $sprk-black Sets the color of the link text on the hover state.
$sprk-link-visited-color $sprk-black-tint-75 Sets the color of visited links.
$sprk-link-visited-border-bottom $sprk-link-underline-width $sprk-link-border-bottom-style $sprk-link-underline-visited-color Sets the border settings for visited links.
$sprk-link-underline-visited-color $sprk-black-tint-75 Sets the color of the link underline on visited links.
$sprk-link-simple-color $sprk-black The simple link color.
$sprk-link-simple-underline-color transparent Sets the color of the simple link underline.
$sprk-link-simple-underline-width 0.0625rem Sets the width of the simple link underline.
$sprk-link-simple-font-weight $sprk-font-weight-body-two The font weight for simple links.
$sprk-link-simple-hover-color $sprk-black Sets the color of the simple link in the hover state.
$sprk-link-simple-hover-underline-width 0.0625rem Sets the width of the simple link underline in the hover state.
$sprk-link-simple-hover-underline-color $sprk-black Sets the color of the simple link underline in the hover state.
$sprk-link-simple-border-bottom $sprk-link-simple-underline-width $sprk-link-border-bottom-style $sprk-link-simple-underline-color Sets the border settings for simple links
$sprk-link-simple-visited-border-bottom $sprk-link-simple-underline-width $sprk-link-border-bottom-style $sprk-link-simple-underline-color Sets the border settings for simple links in the visited state.
$sprk-link-simple-hover-border-bottom $sprk-link-simple-hover-underline-width $sprk-link-border-bottom-style $sprk-link-simple-hover-underline-color Sets the border settings for simple links in the hover state.
$sprk-link-has-icon-color-icon $sprk-green Sets the color of icons in links containing icons.
$sprk-link-has-icon-font-weight $sprk-font-weight-body-one Sets the font weight for links containing icons.
$sprk-link-has-icon-underline-width 0 Sets the underline width for links containing icons.
$sprk-link-has-icon-underline-color transparent Sets the underline color for links containing icons.
$sprk-link-has-icon-fill transparent Sets the fill color for icons contained in links.
$sprk-link-has-icon-border-bottom $sprk-link-has-icon-underline-width $sprk-link-border-bottom-style $sprk-link-has-icon-underline-color Sets the border settings for links with icons
$sprk-link-has-icon-hover-border-bottom $sprk-link-has-icon-underline-width $sprk-link-border-bottom-style $sprk-link-has-icon-underline-color Sets the border settings for links with icons in the hover state.
$sprk-link-has-icon-hover-color-text $sprk-green Sets the color of text in links containing icons in the hover state.
$sprk-link-plain-border none Sets the border settings for plain links
$sprk-link-plain-visited-border none Sets the border settings for plain links in the visited state
$sprk-link-disabled-color $sprk-gray-dark The disabled link color.
$sprk-link-disabled-font-weight bold The font weight for disabled links.
$sprk-link-disabled-underline-width 0 The width of the underline for disabled links.
$sprk-link-disabled-border-bottom $sprk-link-disabled-underline-width $sprk-link-border-bottom-style $sprk-link-disabled-color Sets the border settings for disabled links.
$sprk-link-disabled-hover-border-bottom $sprk-link-disabled-underline-width $sprk-link-border-bottom-style $sprk-link-disabled-color Sets the border settings for disabled links in the hover state.

Class Modifiers

Class Description
.sprk-b-Link--simple Simple links have no underline until hovered.
.sprk-b-Link--has-icon Used when a link is next to an icon. There will not be an underline.
.sprk-b-Link--plain Removes the underline from links on initial state and on hover, active, focus, and visited states.
.sprk-b-Link--disabled Disabled links have a muted color and cannot be interacted with.

These are the standard link type. They typically appear within a block of content, but can be used on their own.

<a class="sprk-b-Link" href="#nogo" data-id="link-1" data-analytics="object.action.event">Base Link</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 'simple', 'icon', '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.

<a class="sprk-b-Link sprk-b-Link--simple" href="#nogo" data-id="link-2" data-analytics="object.action.event">Simple Link</a>
          
<sprk-link linkType="simple" href="#" idString="link-2" analyticsString="object.action.event">
  Simple Link
</sprk-link>

Information

The customization options available for the inline variant are also available for simple 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--has-icon sprk-b-Link--simple" 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--stroke-current-color" viewBox="0 0 100 100">
    <use xlink:href="#communication" />
  </svg>

  Message Us
</a>
          
<sprk-link linkType="icon" href="#" idString="link-3" analyticsString="object.action.event">
  <sprk-icon iconType="communication" additionalClasses="sprk-c-Icon--l sprk-c-Icon--stroke-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.