Skip to main content

Link

A Link (also known as a Hyperlink) is a clickable text element. It may be used for navigation and to trigger an event. Links are visualized to stand out from standard (non-clickable) text.

Rules of Thumb

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.