The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Links

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


Link colors

The darkest shade (900) of the Cerulean color is the default color for links. Link text is bold.

For mouse hover, use an underline.

#008ACF

$eos-bc-cerulean-900

This is the default link color

Special use case

When the color contrast fails between $eos-bc-cerulean-900 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 underline on mouse hover.

#141823

$eos-bc-gray-1000

Link on colored backgrounds

#FFFFFF

$eos-bc-white

Link on colored backgrounds

content_copy
<a href='#'>Edit node details</a>
content_copy
<a href='#' class='link-dark'>Edit node details</a>
content_copy
<a href='#' class='link-light'>Edit node details</a>