Notice

The notice 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"}
{{% notice icon="skull-crossbones" style="primary" title="There may be pirates" %}}
It is all about the boxes.
{{% /notice %}}
{{% notice "primary" "There may be pirates" "skull-crossbones" %}}
It is all about the boxes.
{{% /notice %}}
{{ partial "shortcodes/notice.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

This is not available using Markdown callout syntax.
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)

This is not available using Markdown callout syntax.
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.

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.
{{% notice style="caution" %}}
Advises about risks or negative outcomes of certain actions.
{{% /notice %}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{ partial "shortcodes/notice.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"}
{{% notice style="primary" title="Primary" %}}
A **primary** disclaimer
{{% /notice %}}

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

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

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

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

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

{{ partial "shortcodes/notice.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
{{% notice style="blue" title="Blue" %}}
A **blue** disclaimer
{{% /notice %}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{ partial "shortcodes/notice.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"}
{{% notice icon="skull-crossbones" style="default" title="Default" %}}
Just some default color.
{{% /notice %}}

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

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

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

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

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

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

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

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

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

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

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

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

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

{{ partial "shortcodes/notice.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/notice.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"}
{{% notice color="fuchsia" icon="fa-fw fab fa-hackerrank" title="**Hugo** is _awesome_" %}}
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
{{% /notice %}}
{{% notice %}}
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
{{% /notice %}}
{{ partial "shortcodes/notice.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="notice-toggle"}

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

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

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

{{ partial "shortcodes/notice.html" (dict
  "page" .
  "content" "Thank you!"
  "expanded" "false"
  "groupid" "notice-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
{{% notice style="accent" title="Just a bar" %}}{{% /notice %}}

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

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

{{ partial "shortcodes/notice.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.
{{% notice style="caution" title="Callouts can have custom titles" %}}
Like this one.
{{% /notice %}}

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

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

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

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

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

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

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

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

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

{{ partial "shortcodes/notice.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/notice.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/notice.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!");
> ```
{{% notice style="secondary" %}}
```
printf("Hello World!");
```
{{% /notice %}}
{{% notice "secondary" %}}
```
printf("Hello World!");
```
{{% /notice %}}
{{ partial "shortcodes/notice.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!
{{% notice style="magic" %}}
It's a kind of...

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

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

It’s a kind of…

Maaagic!