Links

Information related to how to implement links and how to choose the right color.


Link colors

Our blue color is the default color for links. Link text is bold.

For mouse hover, use an underline.

#008ACF

$eos-bc-blue-500

This is the default link color

Special use cases

When the color contrast fails between $eos-bc-blue-500 and the elements background, the link color remains the same as the text color, dark grey or white. The link text is bold and underlined. Remove the underline on mouse hover.

Remove the underline on mouse hover.

#141823

$eos-bc-gray-1000

Link on colored backgrounds.

#FFFFFF

$eos-bc-white

Link on colored backgrounds.

Dark theme

For the dark theme $eos-bc-blue-500 should be replaced for $eos-bc-cerulean-100 for the default link color. The link text should be bold and underlined, same as with the special use cases.

Remove the underline on mouse hover.

#B3E8F6

$eos-bc-cerulean-100

Link on the dark theme.