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>
<SprkLink
 href="#"
 id="link-1"
>
  Base Link
</SprkLink>

Information

For intra-page links to work in Angular you will need to set anchorScrolling: 'enabled' in your RouterModule configuration.

RouterModule.forRoot(appRoutes, { anchorScrolling: 'enabled' })

See below for available customization options:

Input Type Description
linkType string Can be 'simple', 'icon', 'unstyled' or 'plain'. Will cause the appropriate variant type to render. If omitted, the default Spark Link class is applied. The 'unstyled' variant will render an href with no CSS classes.
href string The URL of the link. If omitted, the link's href will be set to '#' and the routing will be disabled. If set to reference an ID then the page will scroll to that anchor as normal.
analyticsString string The string that will be assigned to the data-analytics attribute of the link.
id string The string that will be assigned to the id 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.
role string Expects a value to assign to the role attribute of the link.
ariaControls string Expects a value to assign to the aria-controls attribute of the link.
ariaLabelledby string Expects a value to assign to the aria-labelledby attribute of the link.
ariaHidden string Expects a value to assign to the aria-hidden attribute of the link.
ariaCurrent string Expects a value to assign to the aria-current attribute of the link.
ariaExpanded string Expects a value to assign to the aria-expanded attribute of the link.
ariaSelected string Expects a value to assign to the aria-selected attribute of the link.
ariaHasPopUp string Expects a value to assign to the aria-haspopup attribute of the link.
ariaLabel string Expects a value to assign to the aria-label attribute of the link.
isDisabled boolean If true, will set disabled styles on the link.
isExternal boolean By default, the component determines if the href is an external or internal link by looking for the ':' character in the href string. If external link functionality is desired with an href value that contains a ':' set this input to true. This overrides the default and avoids using the Angular Router.

Information

See below for available customization options:

Prop Type Description
element string, function Can pass a router link or anchor tag. Defaults to anchor tag if no value is passed.
variant string Can be 'simple', 'has-icon', 'plain', 'disabled', or 'unstyled'. Will cause the appropriate variant type to render.
href string The URL of the link. Defaults to '#' and preventDefault() if no href is provided.
onClick function A function to be called when the element is clicked.
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.

<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>
<SprkLink
 variant="simple"
 idString="link-2"
 href="#"
>
  Simple Link
</SprkLink>

Information

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

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>
<SprkLink
 variant="has-icon"
 idString="link-4"
>
  <SprkIcon
   additionalClasses="sprk-c-Icon--l sprk-u-mrs sprk-c-Icon--stroke-current-color"
   iconName="communication"
  />
  Message Us
</SprkLink>

Information

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

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
 isDisabled="true"
 idString="link-4"
 analyticsString="object.action.event"
>
  Disabled
</sprk-link>
<SprkLink
 variant="disabled"
 idString="link-3"
 href="#"
>
  Disabled Link
</SprkLink>

Information

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

Information

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