Doggo Storybook 0.10.4-34-g3a480e9

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 id="callout-dog-care-tip" title="Dog Care Tip">
  <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">
  <: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.

 Read more Read less
[]

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.
Required inner_block * :slot

The main content of the alert.

 
<p>Regular exercise is essential for keeping your dog healthy and happy.</p>