Links
A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
Please use a button for any other action.
By default, all the links are black $color-grey-900.
You should consider using the default link before thinking to any other color option, but occasionally, you can override the color depending on the context, for example on a dark background, or a link in an error box.
Contextual links
Links, while generally are dark by default, have contextual variations that you can use occasionally depending on the need.
| Color scheme | Usage |
|---|---|
| Light | Used when the background is dark |
| Primary | Highlight important link |
| Danger | Highlight link to error content |
The inline link :
Inline links are links contained into paragraphs of text. By default, the inline links inherit the current size.
The navigation links :
Single links are interface elements used to navigate between pages like :
- previous / next
- paginations
- text anchors
- breadcrumbs
- etc
In this case we use two sizes
| size | value |
|---|---|
| small | size.font.04 (14px) |
| medium | size.font.05 (16px) |
Displaying links with icons
In the link component, you can also add icons :
Exclusively use a 16px icon variant in links, the icon will be resized automaticaly depending on the font-size
Do's and Don'ts
Always use the 16px icon with the links.
Use inline links inside a paragraph, and navigation links outside.
Don't use links for the others actions like showing an additional content. Please use a button instead.