Callouts

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

<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>

Note, Tip, Info, Warning, Check, Danger and Callout on a Notra site — How it looks on your site

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

string

A bold first line, which screen readers announce instead of the default label.

Callout

Callout renders any of the kinds above with variant:

<Callout variant="tip" title="Shortcut">Press ⌘K to search.</Callout>

default:"note"

The kind of callout, and any other value stops the build.

string

A bold first line.

Styling

Every callout carries the class callout:

style.css

.callout { border-radius: 1rem; }

Last modified on October 8, 2026

Get started

Domains

Write content

Components

Customize

Publish

Reference

Props

Callout

Styling

​Props

​Callout

​Styling

Props

Callout

Styling