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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
Required id * :string
rest :global Any additional HTML attributes.
title :string An optional title.
variant :string "info"
icon :slot Optional slot to render an icon. 
<: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>
Required inner_block * :slot The main content of the alert. 
<p>
  Did you know? Dogs have a sense of time and can get upset when their
  routine is changed.
</p>