Callout

Call-out box for notes/asides in body copy, in an accent-tinted or neutral tone.

Feedback

Usage

import { Callout, Note } from "@zudo-sg/ui/src/cards/callout/callout";

<Callout tone="note" title="Note">Body copy.</Callout>
<Note title="Note">Same as tone="note".</Note>

Default (tone=note, with title)

Tones (note / muted)

Without a title

Note alias

Source

<Callout title="Note">
  <p>An accent-tinted callout that highlights a note in the flow of body copy.</p>
</Callout>

Live CSS

Injected into the previews above. Callout

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */