Link

Link lets you move between websites, pages or sections. It’s a navigational element.

Status

Links have different status based on its usage. This table is gathering all these variations:

 

Standalone link

List link

Inline link

Active

It's the link default status. The link is available

Hover

When a user hover with the mouse a link

Focused

When a user select a link with a keyboard or a screen reader

Disable

When a link is not active (the link is broke)

The default behavior of the link is as follows. Depending on its use and the context in which it is used, the link will take on the size used in the content.

 

It’s the default variant. It’s used alone and/or directly after another content. It can be used with icon in specific case. Don’t use this type of link in sentence or paragraph.

It’s used when we have more than one link in a component (e.g. footer). It can be used with icon in specific case.

 

It’s used directly in paragraphs or sentences. It has the same size and weight than text around it.