Callout

Th' callout shortcode shows boxes wit' configur'ble color, title an' ay'con.

There may be pirates
It be all about th' boxes.

Usage

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

If ye want t' display a transparent expand'ble box without any border, ye can also use th' expand shortcode.

Parameters

Name Posit'n Default Notes
groupid <empty> Arbitrary name o' th' group th' box belongs t'.

Expand'ble boxes wit' th' same groupid synchr'nize their open state.
style 1 default Th' style scheme used fer th' box.

- by severity: caut'n, 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, act'n, inline

Ye can also define yer own styles.
color see notes Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.

- fer severity styles: a nice match'n color fer th' severity
- fer all other styles: th' correspond'n color
title 2 see notes Arbitrary text fer th' box title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.

- fer severity styles: th' match'n title fer th' severity
- fer all other styles: <empty>

If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con 3 see notes Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.

- fer severity styles: a nice match'n ay'con fer th' severity
- fer all other styles: <empty>

If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
expanded <empty> Whether t' draw an expander an' how th' rrrambl'n be displayed.

- <empty>: no expander be drawn an' th' rrrambl'n be permanently shown
- true: th' expander be drawn an' th' rrrambl'n be initially shown
- false: th' expander be drawn an' th' rrrambl'n be initially hidden
<content> <empty> Arbitrary text t' be displayed 'n box.

Sett'ns

Defin'n own Styles

Opt'n Besides th' predefined style values from above, ye be able t' define yer own.

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

  [[params.boxStyle]]
    ay'con = 'plus-circle'
    identifier = 'new'
    style = 'info'
    title = ' '
params:
  boxStyle:
  - color: violet
    i18n: ''
    ay'con: hand-sparkles
    identifier: magic
    title: Magic
  - ay'con: 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 th' style parameter used 'n a shortcode.
style <empty> If ye define this optional parameter, this be whar' default values fer title, ay'con an' color be taken from if style exists beforehand. Ye can reference predefined styles as also yer own styles.
title <empty> Th' default title used. If ye have set style an' don’t want any title at all, ye have t' set this parameter t' " “. See th' parameter i18n if ye use multiple languages 'n yer ship.
i18n <empty> If no title be given but i18n be set, th' title will be taken from th' translat'n files by that key.
ay'con <empty> Th' default ay'con used. If ye have set style an' don’t want any ay'con at all, ye have t' set this parameter t' " “.
color <empty> Th' default color used. If ye have set style an' don’t want any color at all, ye have t' set this parameter t' " “.

Below be a usage example.

Marrrkdown Attributes Configurat'n

Th' first line o' th' Marrrkdown rules only has room fer style, title an' expanded. Th' parameters color, ay'con an' groupid be written as Marrrkdown attributes 'n a line follow'n th' callout instead, so Hugo’s block attributes be required if ye use one o' them 'n Marrrkdown rules.

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

Without it, Cap'n Hugo doesn’t recognize th' line, so it be printed as text below th' box an' th' parameters be ignored. Th' shortcode an' partial rules work regardless.

See th' example on how th' attributes be written.

Examples

By Severity Us'n Marrrkdown Callout Rules

​
> [!caut'n]
> Advises about risks or negative outcomes o' certain act'ns.

> [!important]
> Key informat'n users need t' know t' achieve their goal.

> [!info]
> Informat'n that users <ins>_might_</ins> find interest'n.

> [!note]
> Useful informat'n that users should know, even when skimm'n rrrambl'n.

> [!tip]
> Helpful advice fer do'n th'ns better or more easily.

> [!warning]
> Urgent info that needs immediate user attent'n t' avoid problems.
{{% callout style="caution" %}}
Advises about risks or negative outcomes o' certain act'ns.
{{% /callout %}}

{{% callout style="important" %}}
Key informat'n users need t' know t' achieve their goal.
{{% /callout %}}

{{% callout style="info" %}}
Informat'n that users <ins>_might_</ins> find interest'n.
{{% /callout %}}

{{% callout style="note" %}}
Useful informat'n that users should know, even when skimm'n rrrambl'n.
{{% /callout %}}

{{% callout style="tip" %}}
Helpful advice fer do'n th'ns better or more easily.
{{% /callout %}}

{{% callout style="warning" %}}
Urgent info that needs immediate user attent'n t' avoid problems.
{{% /callout %}}
{{% callout "caution" %}}
Advises about risks or negative outcomes o' certain act'ns.
{{% /callout %}}

{{% callout "important" %}}
Key informat'n users need t' know t' achieve their goal.
{{% /callout %}}

{{% callout "info" %}}
Informat'n that users <ins>_might_</ins> find interest'n.
{{% /callout %}}

{{% callout "note" %}}
Useful informat'n that users should know, even when skimm'n rrrambl'n.
{{% /callout %}}

{{% callout "tip" %}}
Helpful advice fer do'n th'ns better or more easily.
{{% /callout %}}

{{% callout "warning" %}}
Urgent info that needs immediate user attent'n t' avoid problems.
{{% /callout %}}
{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Advises about risks or negative outcomes o' certain act'ns."
  "style" "caution"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Key informat'n users need t' know t' achieve their goal."
  "style" "important"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Informat'n that users <ins>_might_</ins> find interest'n."
  "style" "info"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Useful informat'n that users should know, even when skimm'n rrrambl'n."
  "style" "note"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Helpful advice fer do'n th'ns better or more easily."
  "style" "tip"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Urgent info that needs immediate user attent'n t' avoid problems."
  "style" "warning"
)}}
Caut'n
Advises about risks or negative outcomes o' certain act'ns.
Important
Key informat'n users need t' know t' achieve their goal.
Ahoi
Informat'n that users might find interest'n.
Avast
Useful informat'n that users should know, even when skimm'n rrrambl'n.
Smarrrt Arrrse
Helpful advice fer do'n th'ns better or more easily.
Arrr
Urgent info that needs immediate user attent'n t' avoid problems.

By Brand Colors wit' Title an' Ay'con Variant'n

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

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

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

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

{{% callout ay'con="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
{ay'con="bug"}

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

> [!orange] Orange
> A **orange** disclaimer
{ay'con="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 ay'con="bug" style="grey" %}}
A **grey** disclaimer
{{% /callout %}}

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

{{% callout ay'con="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.
{ay'con="skull-crossbones"}

> [!transparent] Transparent
> No vis'ble borders.
{ay'con="skull-crossbones"}

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

> [!link] Link
> Style o' topbar buttons
{ay'con="skull-crossbones"}

> [!act'n] Act'n
> Style o' act'n buttons like Merrrmaid zoom or block code copy-t'-clipboard
{ay'con="skull-crossbones"}

> [!inline] Inline
> Style o' inline buttons like inline code copy-t'-clipboard
{ay'con="skull-crossbones"}
{{% callout ay'con="skull-crossbones" style="default" title="Default" %}}
Just some default color.
{{% /callout %}}

{{% callout ay'con="skull-crossbones" style="transparent" title="Transparent" %}}
No vis'ble borders.
{{% /callout %}}

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

{{% callout ay'con="skull-crossbones" style="link" title="Link" %}}
Style o' topbar buttons
{{% /callout %}}

{{% callout ay'con="skull-crossbones" style="action" title="Action" %}}
Style o' act'n buttons like Merrrmaid zoom or block code copy-t'-clipboard
{{% /callout %}}

{{% callout ay'con="skull-crossbones" style="inline" title="Inline" %}}
Style o' inline buttons like inline code copy-t'-clipboard
{{% /callout %}}
{{% callout "default" "Default" "skull-crossbones" %}}
Just some default color.
{{% /callout %}}

{{% callout "transparent" "Transparent" "skull-crossbones" %}}
No vis'ble borders.
{{% /callout %}}

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

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

{{% callout "action" "Action" "skull-crossbones" %}}
Style o' act'n buttons like Merrrmaid zoom or block code copy-t'-clipboard
{{% /callout %}}

{{% callout "inline" "Inline" "skull-crossbones" %}}
Style o' inline buttons like inline code copy-t'-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 vis'ble 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 o' topbar buttons"
  "icon" "skull-crossbones"
  "style" "link"
  "title" "Link"
)}}

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

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Style o' inline buttons like inline code copy-to-clipboard"
  "icon" "skull-crossbones"
  "style" "inline"
  "title" "Inline"
)}}
Default
Just some default color.
Transparent
No vis'ble borders.
Code
Colored like a code fence.
Link
Style o' topbar buttons
Act'n
Style o' act'n buttons like Merrrmaid zoom or block code copy-to-clipboard
Inline
Style o' inline buttons like inline code copy-to-clipboard

Various Features

Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown 'n Title an' Rrrambl'n

​
> [!default] **Cap'n Hugo** be _awesome_
> {{% include "shortcodes/include/INCLUDE_ME.md" %}}
{color="fuchsia" ay'con="fa-fw fab fa-hackerrank"}
{{% callout color="fuchsia" ay'con="fa-fw fab fa-hackerrank" title="**Hugo** be _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** be _awesome_"
)}}
Cap'n Hugo be awesome

Ye can add standard markdown rules:

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

th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)

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

Expand'ble Rrrambl'n Area wit' groupid

If ye give multiple expand'ble boxes th' same groupid, at most one will be open at any given time. If ye open one o' th' boxes, all other boxes o' th' same group will close.

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

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

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

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

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

No Rrrambl'n 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 Marrrkdown Callouts

​
> [!caut'n] Callouts can have custom titles
> Like this one.

> [!caut'n] Title-only callout

> [!note]- Be callouts fold'ble?
> Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed

> [!note]+ Be callouts fold'ble?
> Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed

> [!info] Can callouts be nested?
> > [!important] Yes!, they can.
> > > [!tip] Ye can even use multiple layers o' nest'n.
{{% 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 fold'ble?" %}}
Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
{{% /callout %}}

{{% callout expanded="true" style="note" title="Are callouts fold'ble?" %}}
Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
{{% /callout %}}

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

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

{{% callout "note" "Are callouts fold'ble?" %}}
Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
{{% /callout %}}

{{% callout "note" "Are callouts fold'ble?" %}}
Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
{{% /callout %}}

{{% callout "info" "Can callouts be nested?" %}}
> [!important] Yes!, they can.
> > [!tip] Ye can even use multiple layers o' nest'n.
{{% /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 fold'ble callout, th' contents be hidden when th' callout be collapsed"
  "expanded" "false"
  "style" "note"
  "title" "Are callouts fold'ble?"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed"
  "expanded" "true"
  "style" "note"
  "title" "Are callouts fold'ble?"
)}}

{{ partial "shortcodes/callout.html" (dict
  "page" .
  "content" "> [!important] Yes!, they can.\n> > [!tip] Ye can even use multiple layers o' nest'n."
  "style" "info"
  "title" "Can callouts be nested?"
)}}
Callouts can have custom titles
Like this one.
Title-only callout
Be callouts fold'ble?
Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
Be callouts fold'ble?
Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
Can callouts be nested?
Yes!, they can.
Ye can even use multiple layers o' nest'n.

Code wit' 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 'n yer hugo.toml an' used fer every shortcode, that accepts a style parameter.

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

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

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

It’s a kind of…

Maaagic!