Notice
The notice
shortcode shows various types of disclaimers with adjustable color, title and icon to help you structure your page.
There may be pirates
It is all about the boxes.
Usage
> [!primary] There may be pirates
> It is all about the boxes.
{{% notice style="primary" title="There may be pirates" icon="skull-crossbones" %}}
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" .
"style" "primary"
"title" "There may be pirates"
"icon" "skull-crossbones"
"content" "It is all about the boxes."
)}}
Callout syntax has limited features as it does not provide all of the below parameter. Nevertheless, it is widely available in other Markdown parsers like GitHub or Obsidian and therefore is the recommend syntax for generating portable Markdown.
If you want to display a transparent expandable box without any border, you can also use the expand
shortcode.
Parameter
Name | Position | Default | Notes |
---|---|---|---|
groupid | <empty> | Arbitrary name of the group the box belongs to. Expandable boxes with the same groupid sychronize 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 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 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 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.
[params]
[[params.boxStyle]]
color = 'gold'
i18n = ''
icon = 'rainbow'
identifier = 'magic'
title = 'Magic'
params:
boxStyle:
- color: gold
i18n: ""
icon: rainbow
identifier: magic
title: Magic
{
"params": {
"boxStyle": [
{
"color": "gold",
"i18n": "",
"icon": "rainbow",
"identifier": "magic",
"title": "Magic"
}
]
}
}
The style
parameter used in a shortcode must match the identifier
in the configuration. The title for the style will be determined from the configured title
. If no title
but a i18n
is set, the title will be taken from the translation files by that key. The title
may be empty in which case, the box does not contain a default title. icon
and color
are working similar.
You can also redefine the predefined styles if you’re not satisfied with the default values.
Below is a usage example.
Examples
By Severity Using 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.
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
{{% notice style="primary" title="Primary" %}}
A **primary** disclaimer
{{% /notice %}}
{{% notice style="secondary" title="Secondary" %}}
A **secondary** disclaimer
{{% /notice %}}
{{% notice style="accent" icon="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" icon="bug" %}}
A **grey** disclaimer
{{% /notice %}}
{{% notice style="magenta" title="Magenta" %}}
A **magenta** disclaimer
{{% /notice %}}
{{% notice style="orange" title="Orange" icon="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" icon="skull-crossbones" %}}
Just some grey default color.
{{% /notice %}}
{{% notice style="code" title="Code" icon="skull-crossbones" %}}
Colored like a code fence.
{{% /notice %}}
{{% notice style="transparent" title="Transparent" icon="skull-crossbones" %}}
No visible borders.
{{% /notice %}}
Default
Just some grey default color.
Code
Colored like a code fence.
Transparent
No visible borders.
Various Features
With User-Defined Color, Font Awesome Brand Icon and Markdown in Title and Content
{{% notice color="fuchsia" title="**Hugo** is _awesome_" icon="fa-fw fab fa-hackerrank" %}}
You can add standard markdown syntax:
- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even **_bold emphasized_** text
- [links](https://example.com)
- etc.[^etc]
[^etc]: 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"
```plaintext
...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)
{{% /notice %}}
Hugo is awesome
You can add standard markdown syntax:
...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)
-
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.
{{% notice style="green" title="Expand me..." groupid="notice-toggle" expanded="true" %}}
No need to press you!
{{% /notice %}}
{{% notice style="red" title="Expand me..." groupid="notice-toggle" expanded="false" %}}
Thank you!
{{% /notice %}}
No Content 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
> [!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.
Callouts can have custom titles
Like this one.
Title-only callout
Can callouts be nested?
Yes!, they can.
You can even use multiple layers of nesting.
Code with Collapsed Colored Borders
> [!secondary]
> ```c
> // With colored border in Markdown syntax
> printf("Hello World!");
> ```
{{% notice style="red" %}}
```c
// With colored border in Shortcode syntax
printf("Hello World!");
```
{{% /notice %}}
Details
// With colored border in Markdown syntax
printf("Hello World!");
Details
// With colored border in Shortcode syntax
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.
> [!magic]
> Maaagic!
Magic
Maaagic!