FEEDBACK

Hint

Numbered Memphis callout. Use to highlight steps in a how-to, key insights inside long-form docs, or numbered captions on a marketing page.

Import

import { Hint } from 'damo-ui'

Live preview

Numbered insight

Pair the numbered tile with a short paragraph. The tile is a Memphis-bordered slab — keep titles short.

Pair with surrounding copy

Use Hints inside long-form docs or how-to flows.

1<Hint num={1} title="Numbered insight">
2  Pair the numbered tile with a short paragraph. The tile is a
3  Memphis-bordered slab — keep titles short.
4</Hint>
5<Hint num={2} title="Pair with surrounding copy">
6  Use Hints inside long-form docs or how-to flows.
7</Hint>

Props

Hint props

Prop	Type	Default	Description
num*	number	—	Number rendered inside the leading 40×40 tile.
title*	ReactNode	—	Short heading rendered in display font.
children*	ReactNode	—	Body paragraph below the title.
className	string	—	Tailwind classes are merged on top of the wrapper.

Accessibility

Hint renders a vanilla div with semantic h4 + p children. The number tile carries no aria-hidden, so screen readers will announce it before the title — this is intentional, since the number is part of the callout's meaning.

← Chip Tabs →