Mark
Uses the <mark> HTML element to highlight text
| 1 | |
| 2 | <p> |
| 3 | This is a |
| 4 | <mark fg-="foreground0">paragraph</mark> |
| 5 | with |
| 6 | <mark fg-="background0" bg-="foreground2">highlighted</mark> |
| 7 | <mark bg-="background2">text</mark></p> |
| 8 |
Theme
Import
@import '@webtui/css/components/mark.css';Usage
<mark fg-="foreground1">highlight foreground</mark>
<mark bg-="background2">highlight background</mark>
<mark fg-="foreground2" bg-="background2"
>highlight background and foreground</mark
>
<span is-="mark" fg-="..." bg-="...">highlight a different tag</span>Examples
Use the fg- (foreground) and bg- (background) attributes to change the color and background color of the <mark>
| 1 | |
| 2 | <ul> |
| 3 | <li>fg- only: <mark fg-="foreground2">fg-="foreground1"</mark></li> |
| 4 | <li>bg- only: <mark bg-="background1">bg-="backrground1"</mark></li> |
| 5 | <li>fg- and bg-: <mark bg-="foreground1" fg-="background0">bg-="foreground1" fg-="background0"</mark></li> |
| 6 | </ul> |
| 7 |
Theme
By default, fg-, and bg- match the base theme colors but can be extended with themes
Reference
Extending
To extend the Badge stylesheet, define a CSS rule on the components layer
@layer components {
mark,
[is-~='mark'] {
&[bg-='red'] {
background-color: red;
}
&[fg-='red'] {
color: red;
}
&[bg-='blue'] {
background-color: blue;
}
&[fg-='blue'] {
color: blue;
}
/* ... */
}
}Scope
- All elements with the
is-~="mark"selector - All
<mark>elements
mark,
[is-~='mark'] {
/* ... */
}