Sadrazam – Link Showcase

All link classes and variants from _link.scss

Default Link

Base <a> element uses --color-link-dark

Default This is a default link a

Color Variant

Blue link color using .tc-link-blue-dark

Blue This is a blue link .tc-link-blue-dark
Default vs Blue Default link Blue link

Underline on Hover

Adding .underline shows underline on hover

Default + Underline Hover me for underline .underline
Blue + Underline Hover me for underline .tc-link-blue-dark.underline
Without No underline on hover a
With Underline on hover a.underline

Links with Icons

Combining link classes with Phosphor icons

Default + Icon   Open external a
Blue + Icon   Send email .tc-link-blue-dark
Underline + Icon   View details .tc-link-blue-dark.underline

All Combinations

Every possible combination of link classes

Base Plain link a
Base + Underline With hover underline a.underline
Blue Blue color link a.tc-link-blue-dark
Blue + Underline Blue with hover underline a.tc-link-blue-dark.underline

Dark Background

Links on a dark background to test contrast

Default Default link on dark a
Blue Blue link on dark .tc-link-blue-dark
Underline Hover underline on dark .underline
Blue + Underline Blue + underline on dark .tc-link-blue-dark.underline