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 or Obsidian styled alerts and also call this shortcode from your own partials.

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

> [!primary] There may be pirates
> 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 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
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)
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.

Configuration

Besides the predefined style values, you are able to define your own in the hugo.toml.

{{< multiconfig file=hugo >}} [params] boxStyle = [ { identifier = "magic", i18n = "", title = "Magic", icon = "rainbow", color = "gold" } ] {{< /multiconfig >}}

The style parameter must match the identifier. The title for the style will be determined from the 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 Markdown 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 */%}}

{{% 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 %}}

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 */%}}

{{% 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 %}}

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 */%}}

{{% 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 %}}

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" */%}}
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
{{%/* /notice */%}}

{{% notice color="fuchsia" title="Hugo is awesome" icon="fa-fw fab fa-hackerrank" %}} {{% include "shortcodes/include/INCLUDE_ME.md" %}} {{% /notice %}}

Expandable Content Area

{{%/* notice style="green" title="Expand me..." expanded="true" */%}}
No need to press you!
{{%/* /notice */%}}

{{%/* notice style="red" title="Expand me..." expanded="false" */%}}
Thank you!
{{%/* /notice */%}}

{{% notice style="green" title="Expand me..." expanded="true" %}} No need to press you! {{% /notice %}}

{{% notice style="red" title="Expand me..." 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 */%}}

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

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

Markdown Styled Alerts

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

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

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 */%}}

[!secondary]

// With colored border in Markdown syntax
printf("Hello World!");

{{% notice style="red" %}}

// With colored border in Shortcode syntax
printf("Hello World!");

{{% /notice %}}

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!