Notice

Th' notice shortcode shows various types o' disclaimers wit' adjust'ble color, title an' ay'con t' help ye structure yer plank.

There may be pirates

It be all about th' boxes.

Usage

​
> [!primary] There may be pirates
> It be all about th' boxes.
{{% notice style="primary" title="There may be pirates" ay'con="skull-crossbones" %}}
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"  .
  "style" "primary"
  "title" "There may be pirates"
  "icon" "skull-crossbones"
  "content" "It be all about th' boxes."
)}}

Callout rules has limited features as it does not provide all o' th' below parameter. Nevertheless, it be widely avail'ble 'n other Marrrkdown parsers like GitHub or Obsidian an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.

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

Parameter

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

Expand'ble boxes wit' th' same groupid sychr'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

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 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 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 = 'gold'
    i18n = ''
    ay'con = 'rainbow'
    identifier = 'magic'
    title = 'Magic'
params:
  boxStyle:
  - color: gold
    i18n: ""
    ay'con: rainbow
    identifier: magic
    title: Magic
{
   "params": {
      "boxStyle": [
         {
            "color": "gold",
            "i18n": "",
            "icon": "rainbow",
            "identifier": "magic",
            "title": "Magic"
         }
      ]
   }
}

Th' style parameter used 'n a shortcode must match th' identifier 'n th' configurat'n. Th' title fer th' style will be determined from th' configured title. If no title but a i18n be set, th' title will be taken from th' translat'n files by that key. Th' title may be empty 'n which case, th' box does not contain a default title. ay'con an' color be work'n similar.

Ye can also redefine th' predefined styles if you’re not satisfied wit' th' default values.

Below be a usage example.

Examples

By Severity Us'n Callout Rules

> [!CAUTION]
> 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.
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

{{% notice style="primary" title="Primary" %}}
A **primary** disclaimer
{{% /notice %}}

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

{{% notice style="accent" ay'con="stopwatch" %}}
An **accent** disclaimer
{{% /notice %}}
Primary

A primary disclaimer

Secondary

A secondary disclaimer

Details

An accent disclaimer

By Color

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

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

{{% notice style="orange" title="Orange" ay'con="bug" %}}
A **orange** disclaimer
{{% /notice %}}

{{% notice style="red" title="Red" %}}
A **red** disclaimer
{{% /notice %}}
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

{{% notice style="default" title="Default" ay'con="skull-crossbones" %}}
Just some grey default color.
{{% /notice %}}

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

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

Just some grey default color.

Code

Colored like a code fence.

Transparent

No vis'ble borders.

Various Features

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

{{% notice color="fuchsia" title="**Hugo** be _awesome_" ay'con="fa-fw fab fa-hackerrank" %}}
Ye can add standard markdown rules:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even **_bold emphasized_** text
- [links](https://example.com)
- etc.[^etc]

[^etc]: 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"

```plaintext
...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)

{{% /notice %}}
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.

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

{{% notice style="red" title="Expand me..." groupid="notice-toggle" expanded="false" %}}
Thank ye!
{{% /notice %}}
Expand me…

No need t' press ye!

Expand me…

Thank ye!

No Rrrambl'n or No Title

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

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

Just a box

Various 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.
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]
> ```c
> // Wit' colored border 'n Marrrkdown rules
> printf("Hello World!");
> ```

{{% notice style="red" %}}
```c
// Wit' colored border 'n Shortcode rules
printf("Hello World!");
```
{{% /notice %}}
Details 
// Wit' colored border 'n Marrrkdown rules
printf("Hello World!");
Details 
// Wit' colored border 'n Shortcode rules
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.

> [!magic]
> Maaagic!
Magic

Maaagic!