Link

Use to navigate 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)

 

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.