Links are clickable text elements used to navigate to other pages or display additional information.
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.
<a class="spirit-link spirit-link--animated" href="#"> This is a link </a>
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.
<a class="spirit-link" href="#"> This is a link </a>
Use When
Do not use when
Editorial
Class | Applies to | Outcome |
---|---|---|
|
|
Applies link animation on hover. |