Implementation

Classes and design tokens

Design tokens

NameDescription

$QLD-underline__thickness-thin

The thickness of underlines on the rest state (0.5px).

$QLD-underline__thickness-thick

Copy

The thickness of underlines on the hover state (2px).

$QLD-underline__offset

Copy

The offer of underlines from the text (0.3em).

$QLD-color-light-underline

Colour of underlines for hyperlinks on light backgrounds during the rest state.

$QLD-color-light-hover-underlineCopy

Colour of underlines for hyperlinks on light backgrounds during the hover state.
$QLD-color-light-hover-visited-underline Colour of underlines for visited hyperlinks on light backgrounds during the rest state.
$QLD-color-dark-underline Colour of underlines for hyperlinks on dark backgrounds during the rest state.
$QLD-color-dark-hover-underline

Colour of underlines for hyperlinks on dark backgrounds during the hover state.

$QLD-color-dark-hover-visited-underline Colour of underlines for visited hyperlinks on dark backgrounds during the rest state.
$QLD-color-system__underline--light A default dark underline used on light alert colour backgrounds.
$QLD-color-system__underline--dark A default light underline used on dark alert colour backgrounds.