Callout

The callout shortcode shows boxes with configurable color, title and icon.

There may be pirates
It is all about the boxes.

Usage

​
> [!primary] There may be pirates
> It is all about the boxes.
{icon="skull-crossbones"}
{{% callout icon="skull-crossbones" style="primary" title="There may be pirates" %}}
It is all about the boxes.
{{% /callout %}}
{{% callout "primary" "There may be pirates" "skull-crossbones" %}}
It is all about the boxes.
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "It is all about the boxes."
  "icon" "skull-crossbones"
  "style" "primary"
  "title" "There may be pirates"
)}}

If you want to display a transparent expandable box without any border, you can also use the expand shortcode.

Parameters

Name Position Default Notes
groupid <empty> Arbitrary name of the group the box belongs to.

Expandable boxes with the same groupid synchronize their open state.
style 1 default The style scheme used for the box.

- by severity: caution, important, info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, cyan, green, grey, magenta, orange, red
- by special color: default, transparent, code, link, action, inline

You can also define your own styles.
color see notes The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color
title 2 see notes Arbitrary text for the box title. Depending on the style there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: <empty>

If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon 3 see notes Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: <empty>

If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
expanded <empty> Whether to draw an expander and how the content is displayed.

- <empty>: no expander is drawn and the content is permanently shown
- true: the expander is drawn and the content is initially shown
- false: the expander is drawn and the content is initially hidden
<content> <empty> Arbitrary text to be displayed in box.

Settings

Defining own Styles

Option Besides the predefined style values from above, you are able to define your own.

hugo.
[params]
  [[params.boxStyle]]
    color = 'violet'
    i18n = ''
    icon = 'hand-sparkles'
    identifier = 'magic'
    title = 'Magic'

  [[params.boxStyle]]
    icon = 'plus-circle'
    identifier = 'new'
    style = 'info'
    title = ' '
params:
  boxStyle:
  - color: violet
    i18n: ''
    icon: hand-sparkles
    identifier: magic
    title: Magic
  - icon: plus-circle
    identifier: new
    style: info
    title: ' '
{
   "params": {
      "boxStyle": [
         {
            "color": "violet",
            "i18n": "",
            "icon": "hand-sparkles",
            "identifier": "magic",
            "title": "Magic"
         },
         {
            "icon": "plus-circle",
            "identifier": "new",
            "style": "info",
            "title": " "
         }
      ]
   }
}
Name Default Notes
identifier <empty> This must match the style parameter used in a shortcode.
style <empty> If you define this optional parameter, this is where default values for title, icon and color are taken from if style exists beforehand. You can reference predefined styles as also your own styles.
title <empty> The default title used. If you have set style and don’t want any title at all, you have to set this parameter to " “. See the parameter i18n if you use multiple languages in your site.
i18n <empty> If no title is given but i18n is set, the title will be taken from the translation files by that key.
icon <empty> The default icon used. If you have set style and don’t want any icon at all, you have to set this parameter to " “.
color <empty> The default color used. If you have set style and don’t want any color at all, you have to set this parameter to " “.

Below is a usage example.

Markdown Attributes Configuration

The first line of the Markdown syntax only has room for style, title and expanded. The parameters color, icon and groupid are written as Markdown attributes in a line following the callout instead, so Hugo’s block attributes are required if you use one of them in Markdown syntax.

hugo.
[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true
markup:
  goldmark:
    parser:
      attribute:
        block: true
{
   "markup": {
      "goldmark": {
         "parser": {
            "attribute": {
               "block": true
            }
         }
      }
   }
}

Without it, Hugo doesn’t recognize the line, so it is printed as text below the box and the parameters are ignored. The shortcode and partial syntax work regardless.

See the example on how the attributes are written.

Examples

By Severity Using Markdown Callout Syntax

​
> [!caution]
> Advises about risks or negative outcomes of certain actions.

> [!important]
> Key information users need to know to achieve their goal.

> [!info]
> Information that users <ins>_might_</ins> find interesting.

> [!note]
> Useful information that users should know, even when skimming content.

> [!tip]
> Helpful advice for doing things better or more easily.

> [!warning]
> Urgent info that needs immediate user attention to avoid problems.
{{% callout style="caution" %}}
Advises about risks or negative outcomes of certain actions.
{{% /callout %}}

{{% callout style="important" %}}
Key information users need to know to achieve their goal.
{{% /callout %}}

{{% callout style="info" %}}
Information that users <ins>_might_</ins> find interesting.
{{% /callout %}}

{{% callout style="note" %}}
Useful information that users should know, even when skimming content.
{{% /callout %}}

{{% callout style="tip" %}}
Helpful advice for doing things better or more easily.
{{% /callout %}}

{{% callout style="warning" %}}
Urgent info that needs immediate user attention to avoid problems.
{{% /callout %}}
{{% callout "caution" %}}
Advises about risks or negative outcomes of certain actions.
{{% /callout %}}

{{% callout "important" %}}
Key information users need to know to achieve their goal.
{{% /callout %}}

{{% callout "info" %}}
Information that users <ins>_might_</ins> find interesting.
{{% /callout %}}

{{% callout "note" %}}
Useful information that users should know, even when skimming content.
{{% /callout %}}

{{% callout "tip" %}}
Helpful advice for doing things better or more easily.
{{% /callout %}}

{{% callout "warning" %}}
Urgent info that needs immediate user attention to avoid problems.
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Advises about risks or negative outcomes of certain actions."
  "style" "caution"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Key information users need to know to achieve their goal."
  "style" "important"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Information that users <ins>_might_</ins> find interesting."
  "style" "info"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Useful information that users should know, even when skimming content."
  "style" "note"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Helpful advice for doing things better or more easily."
  "style" "tip"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Urgent info that needs immediate user attention to avoid problems."
  "style" "warning"
)}}
Caution
Advises about risks or negative outcomes of certain actions.
Important
Key information users need to know to achieve their goal.
Info
Information that users might find interesting.
Note
Useful information that users should know, even when skimming content.
Tip
Helpful advice for doing things better or more easily.
Warning
Urgent info that needs immediate user attention to avoid problems.

By Brand Colors with Title and Icon Variantion

​
> [!primary] Primary
> A **primary** disclaimer

> [!secondary] Secondary
> A **secondary** disclaimer

> [!accent]
> An **accent** disclaimer
{icon="stopwatch"}
{{% callout style="primary" title="Primary" %}}
A **primary** disclaimer
{{% /callout %}}

{{% callout style="secondary" title="Secondary" %}}
A **secondary** disclaimer
{{% /callout %}}

{{% callout icon="stopwatch" style="accent" %}}
An **accent** disclaimer
{{% /callout %}}
{{% callout "primary" "Primary" %}}
A **primary** disclaimer
{{% /callout %}}

{{% callout "secondary" "Secondary" %}}
A **secondary** disclaimer
{{% /callout %}}

{{% callout "accent" %}}
An **accent** disclaimer
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **primary** disclaimer"
  "style" "primary"
  "title" "Primary"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **secondary** disclaimer"
  "style" "secondary"
  "title" "Secondary"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "An **accent** disclaimer"
  "icon" "stopwatch"
  "style" "accent"
)}}
Primary
A primary disclaimer
Secondary
A secondary disclaimer
Details
An accent disclaimer

By Color

​
> [!blue] Blue
> A **blue** disclaimer

> [!cyan] Cyan
> A **cyan** disclaimer

> [!green] Green
> A **green** disclaimer

> [!grey]
> A **grey** disclaimer
{icon="bug"}

> [!magenta] Magenta
> A **magenta** disclaimer

> [!orange] Orange
> A **orange** disclaimer
{icon="bug"}

> [!red] Red
> A **red** disclaimer
{{% callout style="blue" title="Blue" %}}
A **blue** disclaimer
{{% /callout %}}

{{% callout style="cyan" title="Cyan" %}}
A **cyan** disclaimer
{{% /callout %}}

{{% callout style="green" title="Green" %}}
A **green** disclaimer
{{% /callout %}}

{{% callout icon="bug" style="grey" %}}
A **grey** disclaimer
{{% /callout %}}

{{% callout style="magenta" title="Magenta" %}}
A **magenta** disclaimer
{{% /callout %}}

{{% callout icon="bug" style="orange" title="Orange" %}}
A **orange** disclaimer
{{% /callout %}}

{{% callout style="red" title="Red" %}}
A **red** disclaimer
{{% /callout %}}
{{% callout "blue" "Blue" %}}
A **blue** disclaimer
{{% /callout %}}

{{% callout "cyan" "Cyan" %}}
A **cyan** disclaimer
{{% /callout %}}

{{% callout "green" "Green" %}}
A **green** disclaimer
{{% /callout %}}

{{% callout "grey" %}}
A **grey** disclaimer
{{% /callout %}}

{{% callout "magenta" "Magenta" %}}
A **magenta** disclaimer
{{% /callout %}}

{{% callout "orange" "Orange" "bug" %}}
A **orange** disclaimer
{{% /callout %}}

{{% callout "red" "Red" %}}
A **red** disclaimer
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **blue** disclaimer"
  "style" "blue"
  "title" "Blue"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **cyan** disclaimer"
  "style" "cyan"
  "title" "Cyan"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **green** disclaimer"
  "style" "green"
  "title" "Green"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **grey** disclaimer"
  "icon" "bug"
  "style" "grey"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **magenta** disclaimer"
  "style" "magenta"
  "title" "Magenta"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **orange** disclaimer"
  "icon" "bug"
  "style" "orange"
  "title" "Orange"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "A **red** disclaimer"
  "style" "red"
  "title" "Red"
)}}
Blue
A blue disclaimer
Cyan
A cyan disclaimer
Green
A green disclaimer
Details
A grey disclaimer
Magenta
A magenta disclaimer
Orange
A orange disclaimer
Red
A red disclaimer

By Special Color

​
> [!default] Default
> Just some default color.
{icon="skull-crossbones"}

> [!transparent] Transparent
> No visible borders.
{icon="skull-crossbones"}

> [!code] Code
> Colored like a code fence.
{icon="skull-crossbones"}

> [!link] Link
> Style of topbar buttons
{icon="skull-crossbones"}

> [!action] Action
> Style of action buttons like Mermaid zoom or block code copy-to-clipboard
{icon="skull-crossbones"}

> [!inline] Inline
> Style of inline buttons like inline code copy-to-clipboard
{icon="skull-crossbones"}
{{% callout icon="skull-crossbones" style="default" title="Default" %}}
Just some default color.
{{% /callout %}}

{{% callout icon="skull-crossbones" style="transparent" title="Transparent" %}}
No visible borders.
{{% /callout %}}

{{% callout icon="skull-crossbones" style="code" title="Code" %}}
Colored like a code fence.
{{% /callout %}}

{{% callout icon="skull-crossbones" style="link" title="Link" %}}
Style of topbar buttons
{{% /callout %}}

{{% callout icon="skull-crossbones" style="action" title="Action" %}}
Style of action buttons like Mermaid zoom or block code copy-to-clipboard
{{% /callout %}}

{{% callout icon="skull-crossbones" style="inline" title="Inline" %}}
Style of inline buttons like inline code copy-to-clipboard
{{% /callout %}}
{{% callout "default" "Default" "skull-crossbones" %}}
Just some default color.
{{% /callout %}}

{{% callout "transparent" "Transparent" "skull-crossbones" %}}
No visible borders.
{{% /callout %}}

{{% callout "code" "Code" "skull-crossbones" %}}
Colored like a code fence.
{{% /callout %}}

{{% callout "link" "Link" "skull-crossbones" %}}
Style of topbar buttons
{{% /callout %}}

{{% callout "action" "Action" "skull-crossbones" %}}
Style of action buttons like Mermaid zoom or block code copy-to-clipboard
{{% /callout %}}

{{% callout "inline" "Inline" "skull-crossbones" %}}
Style of inline buttons like inline code copy-to-clipboard
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Just some default color."
  "icon" "skull-crossbones"
  "style" "default"
  "title" "Default"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "No visible borders."
  "icon" "skull-crossbones"
  "style" "transparent"
  "title" "Transparent"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Colored like a code fence."
  "icon" "skull-crossbones"
  "style" "code"
  "title" "Code"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Style of topbar buttons"
  "icon" "skull-crossbones"
  "style" "link"
  "title" "Link"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Style of action buttons like Mermaid zoom or block code copy-to-clipboard"
  "icon" "skull-crossbones"
  "style" "action"
  "title" "Action"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Style of inline buttons like inline code copy-to-clipboard"
  "icon" "skull-crossbones"
  "style" "inline"
  "title" "Inline"
)}}
Default
Just some default color.
Transparent
No visible borders.
Code
Colored like a code fence.
Link
Style of topbar buttons
Action
Style of action buttons like Mermaid zoom or block code copy-to-clipboard
Inline
Style of inline buttons like inline code copy-to-clipboard

Various Features

With User-Defined Color, Font Awesome Brand Icon and Markdown in Title and Content

​
> [!default] **Hugo** is _awesome_
> {{% include "shortcodes/include/INCLUDE_ME.md" %}}
{color="fuchsia" icon="fa-fw fab fa-hackerrank"}
{{% callout color="fuchsia" icon="fa-fw fab fa-hackerrank" title="**Hugo** is _awesome_" %}}
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
{{% /callout %}}
{{% callout %}}
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "color" "fuchsia"
  "content" "{{% include \"shortcodes/include/INCLUDE_ME.md\" %}}"
  "icon" "fa-fw fab fa-hackerrank"
  "title" "**Hugo** is _awesome_"
)}}
Hugo is awesome

You can add standard markdown syntax:

  • multiple paragraphs
  • bullet point lists
  • emphasized, bold and even bold emphasized text
  • links
  • etc.1
...and even source code

the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)

  1. Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean “and other similar things”, or “and so forth” ↩︎

Expandable Content Area with groupid

If you give multiple expandable boxes the same groupid, at most one will be open at any given time. If you open one of the boxes, all other boxes of the same group will close.

​
> [!green]+ Expand me...
> No need to press you!
{groupid="callout-toggle"}

> [!red]- Expand me...
> Thank you!
{groupid="callout-toggle"}
{{% callout expanded="true" groupid="callout-toggle" style="green" title="Expand me..." %}}
No need to press you!
{{% /callout %}}

{{% callout expanded="false" groupid="callout-toggle" style="red" title="Expand me..." %}}
Thank you!
{{% /callout %}}
{{% callout "green" "Expand me..." %}}
No need to press you!
{{% /callout %}}

{{% callout "red" "Expand me..." %}}
Thank you!
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "No need to press you!"
  "expanded" "true"
  "groupid" "callout-toggle"
  "style" "green"
  "title" "Expand me..."
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Thank you!"
  "expanded" "false"
  "groupid" "callout-toggle"
  "style" "red"
  "title" "Expand me..."
)}}
Expand me…
No need to press you!
Expand me…
Thank you!

No Content or No Title

​
> [!accent] Just a bar

> [!accent]
> Just a box
{{% callout style="accent" title="Just a bar" %}}{{% /callout %}}

{{% callout style="accent" %}}
Just a box
{{% /callout %}}
{{% callout "accent" "Just a bar" %}}{{% /callout %}}

{{% callout "accent" %}}
Just a box
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "style" "accent"
  "title" "Just a bar"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Just a box"
  "style" "accent"
)}}
Just a bar
Details
Just a box

Various Markdown Callouts

​
> [!caution] Callouts can have custom titles
> Like this one.

> [!caution] Title-only callout

> [!note]- Are callouts foldable?
> Yes! In a foldable callout, the contents are hidden when the callout is collapsed

> [!note]+ Are callouts foldable?
> Yes! In a foldable callout, the contents are hidden when the callout is collapsed

> [!info] Can callouts be nested?
> > [!important] Yes!, they can.
> > > [!tip] You can even use multiple layers of nesting.
{{% callout style="caution" title="Callouts can have custom titles" %}}
Like this one.
{{% /callout %}}

{{% callout style="caution" title="Title-only callout" %}}{{% /callout %}}

{{% callout expanded="false" style="note" title="Are callouts foldable?" %}}
Yes! In a foldable callout, the contents are hidden when the callout is collapsed
{{% /callout %}}

{{% callout expanded="true" style="note" title="Are callouts foldable?" %}}
Yes! In a foldable callout, the contents are hidden when the callout is collapsed
{{% /callout %}}

{{% callout style="info" title="Can callouts be nested?" %}}
> [!important] Yes!, they can.
> > [!tip] You can even use multiple layers of nesting.
{{% /callout %}}
{{% callout "caution" "Callouts can have custom titles" %}}
Like this one.
{{% /callout %}}

{{% callout "caution" "Title-only callout" %}}{{% /callout %}}

{{% callout "note" "Are callouts foldable?" %}}
Yes! In a foldable callout, the contents are hidden when the callout is collapsed
{{% /callout %}}

{{% callout "note" "Are callouts foldable?" %}}
Yes! In a foldable callout, the contents are hidden when the callout is collapsed
{{% /callout %}}

{{% callout "info" "Can callouts be nested?" %}}
> [!important] Yes!, they can.
> > [!tip] You can even use multiple layers of nesting.
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Like this one."
  "style" "caution"
  "title" "Callouts can have custom titles"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "style" "caution"
  "title" "Title-only callout"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Yes! In a foldable callout, the contents are hidden when the callout is collapsed"
  "expanded" "false"
  "style" "note"
  "title" "Are callouts foldable?"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Yes! In a foldable callout, the contents are hidden when the callout is collapsed"
  "expanded" "true"
  "style" "note"
  "title" "Are callouts foldable?"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "> [!important] Yes!, they can.\n> > [!tip] You can even use multiple layers of nesting."
  "style" "info"
  "title" "Can callouts be nested?"
)}}
Callouts can have custom titles
Like this one.
Title-only callout
Are callouts foldable?
Yes! In a foldable callout, the contents are hidden when the callout is collapsed
Are callouts foldable?
Yes! In a foldable callout, the contents are hidden when the callout is collapsed
Can callouts be nested?
Yes!, they can.
You can even use multiple layers of nesting.

Code with Collapsed Colored Borders

​
> [!secondary]
> ```
> printf("Hello World!");
> ```
{{% callout style="secondary" %}}
```
printf("Hello World!");
```
{{% /callout %}}
{{% callout "secondary" %}}
```
printf("Hello World!");
```
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "```\nprintf(\"Hello World!\");\n```"
  "style" "secondary"
)}}
Details 
printf("Hello World!");

User-defined Style

Self-defined styles can be configured in your hugo.toml and used for every shortcode, that accepts a style parameter.

hugo.
[params]
  [[params.boxStyle]]
    color = 'violet'
    i18n = ''
    icon = 'hand-sparkles'
    identifier = 'magic'
    title = 'Magic'
params:
  boxStyle:
  - color: violet
    i18n: ''
    icon: hand-sparkles
    identifier: magic
    title: Magic
{
   "params": {
      "boxStyle": [
         {
            "color": "violet",
            "i18n": "",
            "icon": "hand-sparkles",
            "identifier": "magic",
            "title": "Magic"
         }
      ]
   }
}
​
> [!magic]
> It's a kind of...
> 
> Maaagic!
{{% callout style="magic" %}}
It's a kind of...

Maaagic!
{{% /callout %}}
{{% callout "magic" %}}
It's a kind of...

Maaagic!
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "It's a kind of...\n\nMaaagic!"
  "style" "magic"
)}}
Magic

It’s a kind of…

Maaagic!