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.

© Velonic - Theme by Techzaa
Theme Settings
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Topbar Color
Light
Dark
Menu Color
Light
Dark
Layout Position