COMPONENTS

Link

Link allows for the styling of hyperlink text.

Link

Link has two core types — inline or standalone.

Link

Link can have either subtle or bold emphasis. Bold emphasis should be used for inline links to ensure the link is visible.

Link

Standalone links can have a leading or trailing icon. Icons should be sized to the same height of the link text and use the text-link color token.

Link

Link has four states — default, hover, active and visited.

Link

Link has three sizes — small, medium and large. Each size maps to a base style in the typography tokens.

Link
  • When inline, link size should match the type size of the text in that line or paragraph.
  • Standalone links should use a text size that is complimentary to the content near it.
link guidance

DO: Keep the size of the link the same as the text size in the same line or paragraph.

link guidance

DON'T: Use a larger or smaller size for inline links.