Links
Colored links
You can use the .link-* classes to colorize
links. Unlike the
.text-* classes, these classes have a :hover and
:focus state. Some of the link styles use a
relatively light foreground color, and should only be used
on a dark background in order to have sufficient contrast.
Link utilities
Colored link helpers have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.
Link opacity
Change the alpha opacity of the link
rgba() color value with utilities. Please be
aware that changes to a color’s opacity can lead to links
with insufficient contrast.
Link hover opacity
You can even change the opacity level on hover.
Underline color
Change the underline’s color independent of the link text color.
Underline opacity
Change the underline’s opacity. Requires adding
.link-underline to first set an
rgba() color we use to then modify the alpha
opacity.
Underline offset
Change the underline’s opacity. Requires adding
.link-underline to first set an
rgba() color we use to then modify the alpha
opacity.
Hover variants
Just like the .link-opacity-*-hover utilities,
.link-offset and
.link-underline-opacity utilities include
:hover variants by default. Mix and match to
create unique link styles.