---
title: Callouts
tags:

- feature/transformer

Quartz supports the same Admonition-callout syntax as Obsidian.

This includes

• 12 Distinct callout types (each with several aliases)
• Collapsable callouts

> [!info] Title
> This is a callout!

See documentation on supported types and syntax here.

[!warning]
Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is after [[SyntaxHighlighting]].

Customization

The callouts are a functionality of the [[ObsidianFlavoredMarkdown]] plugin. See the plugin page for how to enable or disable them.

You can edit the icons by customizing quartz/styles/callouts.scss.

Add custom callouts

By default, custom callouts are handled by applying the note style. To make fancy ones, you have to add these lines to custom.scss.

.callout {
  &[data-callout="custom"] {
    --color: #customcolor;
    --border: #custombordercolor;
    --bg: #custombg;
    --callout-icon: url("data:image/svg+xml; utf8, <custom formatted svg>"); //SVG icon code
  }
}

[!warning]
Don't forget to ensure that the SVG is URL encoded before putting it in the CSS. You can use tools like this one to help you do that.

Showcase

[!info]
Default title

[!question]+ Can callouts be nested?

[!todo]- Yes!, they can. And collapsed!

[!example] You can even use multiple layers of nesting.

[!note]
Aliases: "note"

[!abstract]
Aliases: "abstract", "summary", "tldr"

[!info]
Aliases: "info"

[!todo]
Aliases: "todo"

[!tip]
Aliases: "tip", "hint", "important"

[!success]
Aliases: "success", "check", "done"

[!question]
Aliases: "question", "help", "faq"

[!warning]
Aliases: "warning", "attention", "caution"

[!failure]
Aliases: "failure", "missing", "fail"

[!danger]
Aliases: "danger", "error"

[!bug]
Aliases: "bug"

[!example]
Aliases: "example"

[!quote]
Aliases: "quote", "cite"