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 color scheme used to highlight the box content. - by severity: info , note , tip , warning - by brand color: primary , secondary - by color: blue , green , grey , orange , red - by special color: default , transparent |
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 colors: <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 colors: <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
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
{{% notice style="red" %}}
A **red** disclaimer
{{% /notice %}}
A red disclaimer
By Special Color
Default with Title and Icon
{{% notice style="default" title"Pay Attention to this Note!" icon="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.