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
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.
Links, while generally are dark by default, have contextual variations that you can use occasionally depending on the need.
|Light||Used when the background is dark|
|Primary||Highlight important link|
|Primary--campus||Highlight specific link to Campus|
|Danger||Highlight link to error content|
Inline links are links contained into paragraphs of text. By default, the inline links inherit the current size.
Single links are interface elements used to navigate between pages like :
- previous / next
- text anchors
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