Skip to main content

Rules of Thumb

  • Choose text for Links that:
    • Tell the user what will happen when clicking the Link.
    • Hint at the deeper content the Link will reveal.
  • Keep the text for Links short. Short Links are more visually scannable.
  • Links are to be styled in the Astro-defined primary interactive color.
  • Hovered links are to be styled in the same primary interactive color accompanied by an underline.
  • Un-clicked or un-hovered links have no underline.
  • Inline and standalone links are to be styled the same way.
  • Underlines for hover state are not needed for other elements like tabs, buttons, and pop up menus. However the link hover pattern with underlines are present on hovered pagination.
  • Link-styled icons do not have the underline unless they’re part of an inline text link. Without text, follow button guidance (no underline on hover).

Avoid using “Click Here” or “Link” for the link text.

Appearance and Behavior

Inline and standalone links are to be styled the same way, with the primary blue (--color-palette-brightblue-500) for normal links and hover (--color-palette-brightblue-400) accompanied by an underline for links in hover state.

Underlines can be applied by detaching the text style and selecting the three dots to access further text options, and selecting the underline setting within. This is a less than satisfactory but temporary fix.

Examples

Do: Use the Astro-defined primary interactive color for links.
Do: Use the Astro-defined primary interactive color for links.
Don’t: Style links with non-link colors.
Don’t: Style links with non-link colors.
Do: Style hovered links with an underline without any color change.
Do: Style hovered links with an underline without any color change.
Don’t: Add underlines on non-hovered links.
Don’t: Add underlines on non-hovered links.

Asset Status

Asset Version Status
Documentation N/A Available
UI Kit - Dark v7 Available
UI Kit - Light v7 Available
UI Kit - Wireframe v7 Available
Web Component N/A Not Available
Component Tokens N/A Planned
Status Key
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel