You can apply different colors to links to match your design and highlight important actions. These links include built-in hover and focus states to improve usability and visual feedback. Lighter-colored links should be used on dark backgrounds to ensure proper contrast and accessibility.

Colored link helpers have been updated to work seamlessly with our link utilities. Use these utilities to control link opacity, underline opacity, and underline offset.

You can adjust the transparency of link colors using utility options. Keep in mind that reducing opacity may result in links with insufficient contrast.

You can even change the opacity level on hover.

Change the underline’s color independent of the link text color.

Adjust the underline’s transparency to better match your design. Make sure an underline style is applied first so the opacity changes are visible.

Change the underline’s opacity to control its visual emphasis. An underline must be applied first so that opacity adjustments can take effect.

These link styling options also include hover states by default. Feel free to combine different settings to create unique and expressive link styles.