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

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.

{{% 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
  "context" .
  "style" "primary"
  "title" "There may be pirates"
  "icon" "skull-crossbones"
  "content" "It is all about the boxes."
)}}

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

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)

Note

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

Note

A notice disclaimer

Tip

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

Tip

A tip disclaimer

Warning

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

Warning

A warning disclaimer

Warning with Non-Default Title and Icon

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

Here are dragons

A warning disclaimer

Warning without a Title and Icon

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

A warning disclaimer

By Brand Colors

Primary with Title only

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

Primary

A primary disclaimer

Secondary with Icon only

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

A secondary disclaimer

Accent

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

An accent disclaimer

By Color

Blue without a Title and Icon

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

A blue disclaimer

Green with Title only

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

Green

A green disclaimer

Grey with Icon only

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

A grey disclaimer

Orange with Title and Icon

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

Orange

A orange disclaimer

Red without a Title and Icon

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

A red disclaimer

By Special Color

Default with Positional Parameter

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

Pay Attention to this Note!

Some serious information.

Transparent with Title and Icon

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

Pay Attention to this Note!

Some serious information.

With User-Defined Color and Font Awesome Brand Icon

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

Hugo

Victor? Is it you?