> ## Documentation Index
> Fetch the complete documentation index at: https://www.usenotra.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Callouts

> Highlight a note, tip, warning or success message in a post.

Callouts set a short message apart from the text around it, with an icon and a color for its kind.

```mdx theme={"system"}
<Note>Posts are sorted by their `date`, newest first.</Note>

<Tip>Add `$schema` to blog.json to get autocomplete.</Tip>

<Info>Previews are never indexed by search engines.</Info>

<Warning title="Back up first">Restoring replaces the live version.</Warning>

<Check>Your domain is verified.</Check>

<Danger>Deleting a site can't be undone.</Danger>
```

<Frame caption="How it looks on your site">
  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/callouts-light.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=2f66a94880c0f74059d30d2f9c2b96d5" alt="Note, Tip, Info, Warning, Check, Danger and Callout on a Notra site" className="block dark:hidden" width="1824" height="1190" data-path="images/sites/components/callouts-light.webp" />

  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/callouts-dark.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=46c36d314734d976d45588d6d7f5295a" alt="Note, Tip, Info, Warning, Check, Danger and Callout on a Notra site" className="hidden dark:block" width="1824" height="1190" data-path="images/sites/components/callouts-dark.webp" />
</Frame>

| Component | Icon | Color | Read aloud as |
| - | - | - | - |
| `Note` | Info circle | Muted | "Note" |
| `Info` | Info circle | Blue | "Info" |
| `Tip` | Light bulb | Green | "Tip" |
| `Check` | Check circle | Green | "Done" |
| `Warning` | Triangle | Amber | "Warning" |
| `Danger` | Octagon | Red | "Danger" |

## Props

<ResponseField name="title" type="string">
  A bold first line, which screen readers announce instead of the default label.
</ResponseField>

## Callout

`Callout` renders any of the kinds above with `variant`:

```mdx theme={"system"}
<Callout variant="tip" title="Shortcut">Press ⌘K to search.</Callout>
```

<ResponseField name="variant" type="&#x22;note&#x22; | &#x22;info&#x22; | &#x22;tip&#x22; | &#x22;check&#x22; | &#x22;warning&#x22; | &#x22;danger&#x22;" default="note">
  The kind of callout, and any other value stops the build.
</ResponseField>

<ResponseField name="title" type="string">
  A bold first line.
</ResponseField>

## Styling

Every callout carries the class `callout`:

```css style.css theme={"system"}
.callout { border-radius: 1rem; }
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.