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.
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">Inline</a>
<sprk-link href="#">
Inline
</sprk-link>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. |
| 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">Standalone Link</a>
<sprk-link linkType="standalone" href="#">
Standalone Link
</sprk-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">Disabled</a>
<sprk-link linkType="disabled" href="#">
Disabled
</sprk-link>The customization options available for the inline variant are also available for disabled links.