- 1.5.0

Callout

Renders supplementary information related to the main content.

Read more Read less

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

Maturity: Developing

Usage

Standard callout:

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

Callout with an icon:

<.callout id="callout-fun-dog-fact">
  <:title>Fun Dog Fact</:title>
  <: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 with an action:

<.callout id="callout-fun-dog-fact">
  <:title>Fun Dog Fact</:title>
  <p>
    Did you know? Dogs have a sense of time and can get upset when their
    routine is changed.
  </p>
  <:action><.link>Learn More</.link></:action>
</.callout>
Default
Open in playground

Keep your dog hydrated during long walks by bringing along a portable water bowl.

<div style="inline-size: 100%">
  <.callout id="callout-single-default">
    <p>Keep your dog hydrated during long walks by bringing along a portable water bowl.</p>
  </.callout>
</div>
With icon
Open in playground

Chewing on a bone can help keep your dog's teeth clean and strong.

<div style="inline-size: 100%">
  <.callout id="callout-single-with-icon">
    <p>Chewing on a bone can help keep your dog's teeth clean and strong.</p>
    <: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"
      aria-hidden="true"
    >
      <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/>
      <path d="M12 8h.01"/>
    </svg>
    </:icon>
  </.callout>
</div>
With title
Open in playground 
<div style="inline-size: 100%">
  <.callout id="callout-single-with-title">
    <:title>Dog Care Tip</:title>
    <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
  </.callout>
</div>
With title and icon
Open in playground 
<div style="inline-size: 100%">
  <.callout id="callout-single-with-title-and-icon">
    <:title>Fun Dog Fact</:title>
    <p>
      Did you know? Dogs have a sense of time and can get upset when their
      routine is changed.
    </p>
    <: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"
      aria-hidden="true"
    >
      <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/>
      <path d="M12 8h.01"/>
    </svg>
    </:icon>
  </.callout>
</div>
With action
Open in playground 
<div style="inline-size: 100%">
  <.callout id="callout-single-with-action">
    <:title>Fun Dog Fact</:title>
    <p>
      Did you know? Dogs have a sense of time and can get upset when their
      routine is changed.
    </p>
    <:action><.button type="button">Learn More</.button></:action>
  </.callout>
</div>
Level
Open in playground 
<.callout id="callout-level-dog-mod-var-level-info" level="info">
  <:title>Dog Care Tip</:title>
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
<.callout id="callout-level-dog-mod-var-level-success" level="success">
  <:title>Dog Care Tip</:title>
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
<.callout id="callout-level-dog-mod-var-level-warning" level="warning">
  <:title>Dog Care Tip</:title>
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
<.callout id="callout-level-dog-mod-var-level-danger" level="danger">
  <:title>Dog Care Tip</:title>
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>