hugo-theme-relearn/exampleSite/content/shortcodes/notice.en.md

+++ description = "Disclaimers to help you structure your page" title = "Notice" +++

The notice shortcode shows various types of disclaimers with adjustable color, title and icon to help you structure your page.

{{% notice style="primary" title="There may be pirates" icon="skull-crossbones" %}} It is all about the boxes. {{% /notice %}}

Usage

While the examples are using shortcodes with named parameter you are free to use positional as well, use it as GitHub styled alerts or also call this shortcode from your own partials.

Note that if you want to use GitHub styled alerts Markdown, this is only available starting with Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.132.0{{% /badge %}}. In this case no parameter from the below table are available.

{{< tabs groupid="shortcode-parameter">}} {{% tab title="markdown" %}}

> [!NOTE]
> It is all about the boxes.

{{% /tab %}} {{% tab title="shortcode" %}}

{{%/* notice style="primary" title="There may be pirates" icon="skull-crossbones" */%}}
It is all about the boxes.
{{%/* /notice */%}}

{{% /tab %}} {{% tab title="shortcode (positional)" %}}

{{%/* notice primary "There may be pirates" "skull-crossbones" */%}}
It is all about the boxes.
{{%/* /notice */%}}

{{% /tab %}} {{% tab title="partial" %}}

{{ partial "shortcodes/notice.html" (dict
  "page"  .
  "style" "primary"
  "title" "There may be pirates"
  "icon" "skull-crossbones"
  "content" "It is all about the boxes."
)}}

{{% /tab %}} {{< /tabs >}}

Parameter

Name	Position	Default	Notes
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
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
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)
<content>		<empty>	Arbitrary text to be displayed in box.

Configuration

If you are using GitHub styled alerts, by default the theme also accepts alert levels like info not known to GitHub's implementation. If this interferes with your layout, you can turn this extension off by setting disableBlockquoteNoticeSupport=true in your hugo.toml.

Global Configuration File

This example reflects the default configuration also used if you don't set anything explicitly.

{{< multiconfig file=hugo >}} [params] disableBlockquoteNoticeSupport = false {{< /multiconfig >}}

Examples

By Severity

Caution with markup

{{%/* notice style="caution" */%}}
An **caution** disclaimer

You can add standard markdown syntax:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even ***bold emphasized*** text
- [links](https://example.com)
- etc.

```plaintext
...and even source code
```

> the possibilities are endless (almost - including other shortcodes may or may not work)
{{%/* /notice */%}}

{{% notice style="caution" %}} An caution disclaimer

You can add standard markdown syntax:

• multiple paragraphs
• bullet point lists
• emphasized, bold and even bold emphasized text
• links
• etc.

...and even source code

the possibilities are endless (almost - including other shortcodes may or may not work) {{% /notice %}}

Important

{{%/* notice style="important" */%}}
A **important** disclaimer
{{%/* /notice */%}}

{{% notice style="important" %}} A important disclaimer {{% /notice %}}

Info

{{%/* notice style="info" */%}}
A **information** disclaimer
{{%/* /notice */%}}

{{% notice style="info" %}} A information disclaimer {{% /notice %}}

Note

{{%/* notice style="note" */%}}
A **notice** disclaimer
{{%/* /notice */%}}

{{% notice style="note" %}} A notice disclaimer {{% /notice %}}

Tip

{{%/* notice style="tip" */%}}
A **tip** disclaimer
{{%/* /notice */%}}

{{% notice style="tip" %}} A tip disclaimer {{% /notice %}}

Warning

{{%/* notice style="warning" */%}}
A **warning** disclaimer
{{%/* /notice */%}}

{{% notice style="warning" %}} A warning disclaimer {{% /notice %}}

Warning with Non-Default Title and Icon

{{%/* notice style="warning" title="Here are dragons" icon="dragon" */%}}
A **warning** disclaimer
{{%/* /notice */%}}

{{% notice style="warning" title="Here are dragons" icon="dragon" %}} A warning disclaimer {{% /notice %}}

Warning without a Title and Icon

{{%/* notice style="warning" title=" " icon=" " */%}}
A **warning** disclaimer
{{%/* /notice */%}}

{{% notice style="warning" title=" " icon=" " %}} A warning disclaimer {{% /notice %}}

By Brand Colors

Primary with Title only

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

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

Secondary with Icon only

{{%/* notice style="secondary" icon="stopwatch" */%}}
A **secondary** disclaimer
{{%/* /notice */%}}

{{% notice style="secondary" icon="stopwatch" %}} A secondary disclaimer {{% /notice %}}

Accent

{{%/* notice style="accent" */%}}
An **accent** disclaimer
{{%/* /notice */%}}

{{% notice style="accent" %}} An accent disclaimer {{% /notice %}}

By Color

Blue without a Title and Icon

{{%/* notice style="blue" */%}}
A **blue** disclaimer
{{%/* /notice */%}}

{{% notice style="blue" %}} A blue disclaimer {{% /notice %}}

Green with Title only

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

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

Grey with Icon only

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

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

Orange with Title and Icon

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

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

Red without a Title and Icon

{{%/* notice style="red" */%}}
A **red** disclaimer
{{%/* /notice */%}}

{{% notice style="red" %}} A red disclaimer {{% /notice %}}

By Special Color

Default with Positional Parameter

{{%/* notice default "Pay Attention to this Note!" "skull-crossbones" */%}}
Some serious information.
{{%/* /notice */%}}

{{% notice default "Pay Attention to this Note!" "skull-crossbones" %}} Some serious information. {{% /notice %}}

Transparent with Title and Icon

{{%/* notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" */%}}
Some serious information.
{{%/* /notice */%}}

{{% notice style="transparent" title="Pay Attention to this Note!" icon="skull-crossbones" %}} Some serious information. {{% /notice %}}

With User-Defined Color, Font Awesome Brand Icon and Markdown Title

{{%/* notice color="fuchsia" title="**Hugo**" icon="fa-fw fab fa-hackerrank" */%}}
Victor? Is it you?
{{%/* /notice */%}}

{{% notice color="fuchsia" title="Hugo" icon="fa-fw fab fa-hackerrank" %}} Victor? Is it you? {{% /notice %}}