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

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close

Text highlight

Highlighting text on a web page helps bring important information to the reader's attention.


Override the default text selection and mark html tag color with CSS:

HTML <mark> tag
content_copy
mark {
  background-color: $eos-text-highlight; /* #2453FF */
  color: $eos-bc-white; /* #fff */
}

Highlight example using mark HTML tag

Text selection
content_copy
::selection {
  background-color: $eos-text-highlight; /* #2453FF */
  color: $eos-bc-white; /* #fff */
}

Select the following text for selection highlight example