# Callout

A callout highlights a piece of information with a color and an icon that match its type.

## Live demo

<StoryEmbed slug="callout" />

## Syntax

```md title="Markdown"
:::callout{type=tip title="Tip"}
Lorem ipsum dolor sit amet.
:::
```

```mdx title="MDX"
<Callout type="warning" title="Careful">Lorem ipsum dolor sit amet.</Callout>
```

## Attributes and props

| Attribute | Type                                       | Default | Description        |
| --------- | ------------------------------------------ | ------- | ------------------ |
| `type`    | `info \| tip \| warning \| danger \| note` | `info`  | Color and icon     |
| `title`   | `string`                                   | —       | Heading of the box |

`note` is styled like `info`. An unknown type falls back to `info`, in Markdown and in MDX alike.

## In other formats

<FormatSupport />