Doggo Storybook 0.9.0

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>
Default Open in playground 
<.callout id="callout-single-default">
  <p>Keep your dog hydrated during long walks by bringing along a portable water bowl.</p>
</.callout>
With icon Open in playground 
<.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>
With title Open in playground 
<.callout id="callout-single-with-title" title="Dog Care Tip">
  <p>Regular exercise is essential for keeping your dog healthy and happy.</p>
</.callout>
With title and icon Open in playground 
<.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>
Variant Open in playground 
<.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>