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

{{< tabs groupId="shortcode-parameter">}} {{% tab name="shortcode" %}}

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

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

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

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

{{ partial "shortcodes/notice.html" (dict
  "context" .
  "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: info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, green, grey, orange, red - by special color: default, transparent
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]({{%relref "shortcodes/icon#finding-an-icon" %}}) 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.

Examples

By Severity

Info with markup

{{%/* notice style="info" */%}}
An **information** 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="info" %}} An information 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 %}}

Note

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

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

Tip

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

{{% 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="fab fa-hackerrank" */%}}
Victor? Is it you?
{{%/* /notice */%}}

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