Callouts · Klaviyo

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Wrap any text and an optional dismiss button in .k-callout and one of the four contextual classes (e.g., .k-callout-success) for basic callout messages.

Something good happened

Something bad happened

Something bad might happen if you keep it up

Here's some info

<div class="k-callout k-callout-success"><p>Something good happened</p></div>
<div class="k-callout k-callout-danger"><p>Something bad happened</p></div>
<div class="k-callout k-callout-warning"><p>Something bad might happen if you keep it up</p></div>
<div class="k-callout k-callout-default"><p>Here's some info</p></div>