Eleventy Notes

Callouts

Callouts, also known as custom containers, admonitions, or alerts, are a way to highlight important information, warnings, or tips in your notes without disrupting the overall flow of your content.

Creating a callout

Creating a callout is simple. Start a blockquote and add [!info] to the first line, where info is the type of the callout.

> [!info]
> This is a callout.
Info

This is a callout.

Changing the title

By default, the callout title is automatically set to match the callout type. However, you can customize this title to better suit your content.

To change the title, simply add your desired text after the callout type:

> [!info] Custom Title Here
> This is the body of the callout.
Custom Title Here

This is the body of the callout.

In cases where you want to highlight a brief piece of information, you can create a callout with just a title and no body:

> [!tip] Title-only Callout
Title-only Callout

Foldable callouts

You can create foldable callouts, which can be expanded or collapsed by the reader. This feature is particularly useful when dealing with large amounts of information that you want to keep organized and easy to navigate.

To create a foldable callout, add a plus + or a minus - directly after the callout type. A plus sign (+) will make the callout expanded by default, while a minus sign (-) will make it collapsed by default.

> [!info]- Callouts are foldable
> This is a callout that is collapsed by default.
Callouts are foldable

This is a callout that is collapsed by default.

Nested callouts

You can nest callouts in multiple levels.

Nested callouts
That's awesome!
Even deeply nested

Supported types

You can use several callout types and aliases. Each type comes with a different background color and icon.

Abstract
> [!abstract]
> Lorem ipsum

Alias: summary, tldr


Info
> [!info]
> Lorem ipsum

Note
> [!note]
> Lorem ipsum

Todo
> [!todo]
> Lorem ipsum

Tip
> [!tip]
> Lorem ipsum

Alias: hint, important


Success
> [!success]
> Lorem ipsum

Alias: check, done


Question
> [!question]
> Lorem ipsum

Alias: help, faq


Warning
> [!warning]
> Lorem ipsum

Alias: caution, attention


Failure
> [!failure]
> Lorem ipsum

Alias: fail, missing


Danger
> [!danger]
> Lorem ipsum

Alias: error


Bug
> [!bug]
> Lorem ipsum

Example
> [!example]
> Lorem ipsum

Quote
> [!quote]
> Lorem ipsum

Alias: cite