Components

Links

scss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
webComponent
:Ready

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.

Links, while generally are dark by default, have contextual variations that you can use occasionally depending on the need.


Color schemeUsage
LightUsed when the background is dark
PrimaryHighlight important link
Primary--campusHighlight specific link to Campus
DangerHighlight 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
  • paginations
  • text anchors
  • breadcrumbs
  • etc

In this case we use two sizes

sizevalue
smallsize.font.04 (14px)
mediumsize.font.05 (16px)

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

Links should be underlined, and react to hover and click.
Use links only for navigation.
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.
Never use the single link inside a paragraph.