Marker
A hand-drawn inline highlighter that paints a sketchy stroke behind text.
Overview
Marker is an inline highlighter — it wraps a run of text in a semantic <mark> and paints a
sketchy hachure stroke behind it, so the words stay readable through the scribble. Use it to draw
attention to a phrase within running text; the four variants tint the highlight to signal intent.
Anatomy
A semantic <mark> with a hand-drawn hachure fill (@ghds/sketch-core) behind the text. The
highlight colour comes from @ghds/tokens (comp.marker.*); the text colour is always inherited,
never set, so the marker adapts to whatever prose it sits in.
Variants & States
Four highlight tones, no interactive states — Marker is static inline decoration.
| State | Status | Notes |
|---|---|---|
| default | Implemented | A warm highlighter yellow. |
| success | Implemented | — |
| info | Implemented | — |
| danger | Implemented | — |
| Hover / Focus | Not implemented | Not interactive. |
Usage
Do
- Use Marker to emphasize a short phrase inside running text.
- Choose the variant that matches meaning — danger for a warning phrase, success for a positive one.
- Let the text colour inherit so the highlight works in any prose context.
Don't
- Don't highlight whole paragraphs — the emphasis loses its meaning when everything is marked.
- Don't rely on the highlight colour alone to carry meaning; the words should still say it.
Accessibility
- Renders a real
<mark>element, so the highlight is exposed with the semantics of marked/ highlighted text where assistive technology supports it. - The sketch stroke is decorative and painted behind the text; it never changes what is announced.
- Because the text colour is inherited (not overridden), contrast is governed by the surrounding prose — keep that prose on an accessible background.
- See the Accessibility Guide for shared conventions.
Content
Mark short, meaningful phrases — a term, a name, a key number — not entire sentences. The highlight is a spotlight; it only works when most of the text is unmarked.
Props API
React@ghds/react
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'info' | 'danger' | 'default' | Highlight colour; default is a warm highlighter yellow. |
...rest | HTMLAttributes<HTMLElement> | — | Native attributes pass through to the <mark> element. |
Web Components@ghds/web-components
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'info' | 'danger' | 'default' | Reflected attribute; highlight colour. |
React Native@ghds/react-native
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'info' | 'danger' | 'default' | Highlight colour. |
children | ReactNode | — | The text to highlight. |
testID | string | — | Test handle for queries. |
Code examples
// React — @ghds/react
import { Marker } from '@ghds/react/marker';
<p>
Remember to <Marker variant="danger">back up</Marker> before you upgrade.
</p>;<!-- Web Components — @ghds/web-components -->
<script type="module">
import '@ghds/web-components/marker';
</script>
<p>Remember to <gh-marker variant="danger">back up</gh-marker> before you upgrade.</p>// React Native — @ghds/react-native
import { Marker } from '@ghds/react-native/marker';
<Text>
Remember to <Marker variant="danger">back up</Marker> before you upgrade.
</Text>;Live Demo
React and Web Components render live below, driven by the same tokens — toggle dark mode in the
header to see both respond identically. React Native can’t run in a browser without additional
react-native-web wiring (not set up in this site), so its usage is shown as a code sample instead.
React @ghds/react
Web Components @ghds/web-components
Highlight tones read as intent: