Callout

Use the callout to highlight supplementary information related to the main content.

Read more Read less

For information that needs immediate attention of the user, use alert/1 instead.

Usage

Standard callout:

<.callout title="Dog Care Tip">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>

Callout with an icon:

<.callout title="Fun Dog Fact">
  <:icon><Heroicons.information_circle /></:icon>
  <p>
    Did you know? Dogs have a sense of time and can get upset when their
    routine is changed.
  </p>
</.callout>
<.callout id="callout-single-default">
  <p>Keep your dog hydrated during long walks by bringing along a portable water bowl.</p>
</.callout>
<.callout id="callout-single-with-icon">
  <p>Chewing on a bone can help keep your dog's teeth clean and strong.</p>
  <:icon><.icon><svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="lucide lucide-info"
  >
    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/>
    <path d="M12 8h.01"/>
  </svg>
  </.icon></:icon>
</.callout>
<.callout id="callout-single-with-title" title="Dog Care Tip">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
<.callout id="callout-single-with-title-and-icon" title="Fun Dog Fact">
  <p>
    Did you know? Dogs have a sense of time and can get upset when their
    routine is changed.
  </p>
  <:icon><.icon><svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="lucide lucide-info"
  >
    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/>
    <path d="M12 8h.01"/>
  </svg>
  </.icon></:icon>
</.callout>
<.callout id="callout-variant-dog-mod-var-variant-info" title="Dog Care Tip" variant="info">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
<.callout id="callout-variant-dog-mod-var-variant-success" title="Dog Care Tip" variant="success">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
<.callout id="callout-variant-dog-mod-var-variant-warning" title="Dog Care Tip" variant="warning">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
<.callout id="callout-variant-dog-mod-var-variant-danger" title="Dog Care Tip" variant="danger">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>