Link

Links are used as navigational elements. They may appear isolated, inside a sentence or paragraph or following the content.

Specifications

Link design specifications
Link design specifications

States

States: enabled, hover, focus, active, visited and disabled.

Link states
Link states

Design tokens

Color

On-light

Component tokenElementCore tokenValue
fontColorLabelcolor-blue-800#0067b3
hoverFontColorLabel:hovercolor-blue-800#0067b3
activeFontColorLabel:activecolor-black#000000
disabledFontColorLabel:disabledcolor-grey-500#999999
visitedFontColorLabel:visitedcolor-purple-700#5f249f
hoverUnderlineColorUnderline:hovercolor-blue-800#0067b3
activeUnderlineColorUnderline:activecolor-black#000000
visitedUnderlineColorUnderline:visitedcolor-purple-700#5f249f
focusColorOutline:focuscolor-blue-600#0095ff

Margin

MarginValue
xxsmall6px
xsmall16px
small24px
medium36px
large48px
xlarge64px
xxlarge100px

Typography

PropertyValue
font-size1rem/16px
font-weight400

Border

PropertyElementCore tokenValue
border-bottom-widthLink container:hoverborder-width-11px
border-styleLink container:hoverborder-style-solidsolid

Icon specs

PropertyElementValue
height/widthicon16/16px
padding-lefticon4px

Accessibility

WCAG 2.2

WAI-ARIA 1.2