Mark
A stroke of highlighter over the words that matter.
On this page
A mark is a stroke of highlighter over the words that matter: the part of a result that matches a search, the phrase a reviewer points at. It is a wash of ink, not a hue, so it reads on every surface and never competes with a status color. Use .mark on a native <mark>.
Mark
<ul class="flex flex-col gap-xs m(0) p(0) text-sm fg-text-body"> <li class="flex"> <span> <mark class="mark">Moon</mark>stone palette</span> </li> <li class="flex"> <span>Half- <mark class="mark">moon</mark>icon</span> </li> <li class="flex"> <span>Phases of the <mark class="mark">moon</mark>, a field guide</span> </li></ul>In a listbox, a combobox or a command palette, wrap the matched part of each option in a mark as the reader types.
#The current match
When a reader steps through matches, as find-in-page does, set aria-current="true" on the one they are at. It fills with ink.
The current match
<p class="m(0) max-w(420) text-sm leading-md fg-text-body">Corners nest by their<mark class="mark">inset</mark>: a container's radius is its content's radius plus the<mark class="mark" aria-current="true">inset</mark>between them, so the gap keeps one width around the bend. A button 4px inside a well takes the well's radius minus that<mark class="mark">inset</mark>.</p>#Brand and underline
mark-brand is a wash of the brand color, for the one phrase a page is about. mark-underline draws the stroke along the foot of the words instead of over them; it is a thick underline, which the browser paints behind the letters and carries across line breaks.
Brand and underline
<p class="m(0) max-w(420) text-md leading-md fg-text-strong">Native HTML and CSS components with<mark class="mark mark-brand">no runtime</mark>, built on the platform and<mark class="mark mark-underline">finished by hand, one component at a time</mark>.</p>#Accessibility
<mark>means "relevant here", not "important": for importance use<strong>. Most screen readers do not announce a mark, so a highlight must not be the only way a result explains itself.- A mark keeps the color of the text it is on, and its wash is ink at about a tenth, so contrast does not change. In forced colors it uses the system's
MarkandMarkText. - A mark that wraps keeps its padding and corner on every line.
#Classes
| Class | Description |
|---|---|
mark | A wash of ink behind the words, in the color of the text around it |
mark-brand | A wash of the brand color, for the one phrase a page is about. With mark |
mark-underline | A thick stroke along the foot of the words instead of a wash over them. With mark |