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) |
|
|
|
Link size
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.
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.