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) |
|
|
|
Standalone link
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.
List link
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.
Inline link
It’s used directly in paragraphs or sentences. It has the same size and weight than text around it.