Links

Links are clickable text elements used to navigate to other pages or display additional information.

Animated

When feasible, prefer animated links. Use animated links within components that control link wrapping, such as Card, List, or Vertical Navigation. Components with wrapping text, such as Long Form Text, should fall back to traditional links.

Code Copied
Copy Code
<a class="spirit-link spirit-link--animated" href=#>This is a link</a>

Traditional

Fall back to traditional links when animated links are not feasible, such as within Long Form Text. Use traditional link where the link label may wrap, such as when it occurs inline with paragraphs of prose.

Code Copied
Copy Code
<a class="spirit-link" href=#>This is a link</a>

Guidelines

Use When

  • Leading a user to another page
  • Displaying additional information

Do not use when

  • Submitting or confirming an action. Use a Button instead.
  • Adding emphasis to your main call to action. Use a Button instead.

Editorial

  • Keep link text short
  • Be descriptive of the destination or offer a clear indication of where the link leads
  • Avoid using generic content, such as “click here”, which do not describe the intended action.

Code Reference

Class Applies to Outcome

.spirit-link--animated

.spirit-link

Applies link animation on hover.