Annotate
Decorative arrow and note beside wrapped content — optional highlighter mark, side placement, and offset tuning.
Annotate wraps inline content with a static callout arrow and a short handwritten-style note. Pass note for the label and side for placement around the child. Optional mark paints a highlighter behind the wrapped words; color tints the arrow, label, and mark together.
Spacing and nudges are CSS custom properties on the root (targetGap, labelGap, rotate, offset props, labelMaxWidth, textAlign). The note and arrow are aria-hidden and presentational, so anything important in note must also appear in nearby announced copy.
When to use
- Marketing or editorial emphasis beside a phrase (pricing perk, feature callout)
- Static decoration that never needs hover, focus, or dismiss
When not to use
- Hoverable, focusable, or dismissible help → Tooltip or Popover
- Status that belongs on a control chrome → Badge or Chip
Related
- Tooltip — interactive, accessible hover/focus hints
- Popover — richer dismissible callouts
- Badge — corner status on a control
Common examples
Side note with mark
Default side is top. mark paints a highlighter behind the wrapped phrase. Leave room around the line — overflow clipping cuts off the arrow and note. Repeat the benefit in nearby Text; the note is aria-hidden.
Top end
Pick one other side when the note should sit toward a corner instead of dead-center above. Tint arrow and label with color. Do not fan out every compass point.
Ask your agent
Highlight the words "unlimited storage" in this pricing copy with a short note "Best value" above. Repeat the benefit in surrounding body text so screen readers are not relying on the decorative note alone.Last updated on