Notice

Th' notice 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"}
{{% notice ay'con="skull-crossbones" style="primary" title="There may be pirates" %}}
It be all about th' boxes.
{{% /notice %}}
{{% notice "primary" "There may be pirates" "skull-crossbones" %}}
It be all about th' boxes.
{{% /notice %}}
{{ partial "shortcodes/notice.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

This be not avail'ble us'n Marrrkdown callout rules.
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)

This be not avail'ble us'n Marrrkdown callout rules.
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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{ partial "shortcodes/notice.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/notice.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"}
{{% notice color="fuchsia" ay'con="fa-fw fab fa-hackerrank" title="**Hugo** be _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** 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="notice-toggle"}

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

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

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

{{ partial "shortcodes/notice.html" (dict
  "page" .
  "content" "Thank ye!"
  "expanded" "false"
  "groupid" "notice-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
{{% 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 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.
{{% 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 fold'ble?" %}}
Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed
{{% /notice %}}

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

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

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

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

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

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

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

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

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

It’s a kind of…

Maaagic!