Guidelines
Guidelines
Usage
The Link should:
- Be used for linking from text to a new destination with related information. Links shouldn't be used for platform navigation.
- Be wrapped around short and most relevant parts of content, not around sentences or paragraphs.
- Have its viewport value be set to reflect the breakpoint, or device, the interface is designed for.
- Use the contrasting appearance to its context: 'light' on dark surfaces, and 'dark' on light surfaces.
- Have the content describe what the Link links to and not the URL of the destination. For example, a name of a person should be wrapped into a Link rather than providing the link URL after the name.
Kind
The Link should:
- By default have the kind be set to 'underlined' as this ensures that the Link is recognized.
- Have kind be set to 'bare' when the context of the text consisting of links is clear, like in a footer panel that only contains links.
Size
The Link should:
- Align its size to the Text around it to create a harmonious and easy-to-read experience.
- Be used to align with the platform's content hierarchy.
- Be set to have the same size across viewport sizes.
State
The Link should:
- By default have its state be set to 'default'.
- Have its state be set to 'hover' the state is wanted to be presented in the interface designs. This state should be considered temporary.
Accessibility
The Link should:
- Have its contrast ratio reviewed when placed on images or on colors that are not part of the Cosmos 'surface' palette.
- By default open a link in the same tab, rather than in a new tab or window, as opening it in a new or a window hinders navigation on assistive technologies.
- Use linkAriaLabel to provide an accessible name for icon-only or image links that have no visible text content.