Link
Usage
A link is a clickable text element. Use links:
- As navigational elements to redirect the user to a target page
- To provide the user with relevant information without cluttering his current webpage
- Within a sentence or paragraph, on their own or directly following the related content depending on the context
Color usage
The Cegid Design System includes color usage for link components. Please note that a link’s color is not definitive and changes once the user has clicked on it.
Primary: apply the brand primary color to indicate the main elements on the interface.
Neutral: apply the brand tertiary color to a less prominent element.
Types
The Cegid Design System includes two types of link components.
Inline link
Inline links appear underlined.
Standalone link
Standalone links are not underlined, however their properties clearly indicate that they are clickable elements.
Anatomy and content
- Link
- Text
A link component is a text element consisting of hyperlinked words. The text provides the user with information regarding the page to which he will be redirected by clicking the link.
Behaviour and interaction
States
A link can have one of the following states: resting, hovered, active, focused, visited, disabled.
- The resting state informs the user that an element is clickable.
- The hovered state is triggered by a mouse when a user moves their cursor over a link.
- The active state occurs after a link has been clicked but before you navigate away.
- The focused state communicates when a user has highlighted an element and occurs when a link is tabbed to, either by a keyboard or programmatically.
- The visited state indicates a link that you have previously visited.
- The disabled state indicates that the element exists but is not available to the user.
Inline link states (primary)
Standalone link states (primary)
Standalone link states (neutral)
Responsiveness and density
The hovered state is an important accessibility consideration for keyboard-only users navigating a website.