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

261 lines
6.1 KiB
Markdown
Raw Normal View History

+++
description = "Disclaimers to help you structure your page"
title = "Notice"
+++
2017-08-20 15:10:29 +00:00
2022-05-25 21:39:19 +00:00
The `notice` shortcode shows various types of disclaimers with adjustable color, title and icon to help you structure your page.
2022-05-23 22:37:03 +00:00
{{% notice style="primary" title="There may be pirates" icon="skull-crossbones" %}}
It is all about the boxes.
{{% /notice %}}
2017-08-20 15:10:29 +00:00
2021-07-16 20:04:22 +00:00
## Usage
2017-08-20 15:10:29 +00:00
2022-05-23 22:37:03 +00:00
While the examples are using named parameter you are free to use positional aswell.
2022-05-29 21:35:16 +00:00
{{< tabs groupId="shortcode-parameter">}}
2022-05-23 22:37:03 +00:00
{{% tab name="named" %}}
````go
{{%/* notice style="primary" title="There may be pirates" icon="skull-crossbones" */%}}
It is all about the boxes.
{{%/* /notice */%}}
````
{{% /tab %}}
{{% tab name="positional" %}}
````go
2022-05-23 22:37:03 +00:00
{{%/* notice primary "There may be pirates" "skull-crossbones" */%}}
It is all about the boxes.
2017-08-20 15:10:29 +00:00
{{%/* /notice */%}}
2021-07-16 20:04:22 +00:00
````
2017-08-20 15:10:29 +00:00
2022-05-23 22:37:03 +00:00
{{% /tab %}}
{{< /tabs >}}
2022-05-23 22:37:03 +00:00
### Parameter
| Name | Position | Default | Notes |
|:----------|:---------|:----------|:------------|
| **style** | 1 | `default` | The color scheme used to highlight the box content.<br/><br/>- by severity: `info`, `note`, `tip`, `warning`<br/>- by brand color: `primary`, `secondary`<br/>- by color: `blue`, `green`, `grey`, `orange`, `red`<br/>- by special color: `default`, `transparent` |
| **title** | 2 | see notes | Arbitray text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br/><br/>- for severity styles: the matching title for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>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 "cont/icons#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.<br/><br/>- for severity styles: a nice matching icon for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
2021-07-16 20:04:22 +00:00
## Examples
2022-05-23 22:37:03 +00:00
### By Severity
2017-08-20 15:10:29 +00:00
2022-05-23 22:37:03 +00:00
#### Info with markup
````go
{{%/* notice style="info" */%}}
2022-05-23 22:37:03 +00:00
An **information** disclaimer
2021-07-16 20:04:22 +00:00
You can add standard markdown syntax:
2021-07-16 20:04:22 +00:00
- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even ***bold emphasized*** text
2021-07-16 20:04:22 +00:00
- [links](https://example.com)
- etc.
```plaintext
2021-07-16 20:04:22 +00:00
...and even source code
```
> the possiblities are endless (almost - including other shortcodes may or may not work)
{{%/* /notice */%}}
````
2022-05-23 22:37:03 +00:00
{{% notice style="info" %}}
2022-05-23 22:37:03 +00:00
An **information** disclaimer
2021-07-16 20:04:22 +00:00
You can add standard markdown syntax:
2021-07-16 20:04:22 +00:00
- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** and even **_bold emphasized_** text
2021-07-16 20:04:22 +00:00
- [links](https://example.com)
- etc.
2017-08-20 15:10:29 +00:00
```plaintext
2021-07-16 20:04:22 +00:00
...and even source code
2017-08-20 15:10:29 +00:00
```
> the possiblities are endless (almost - including other shortcodes may or may not work)
2022-05-23 22:37:03 +00:00
{{% /notice %}}
2021-07-16 20:04:22 +00:00
#### Note
2021-07-16 20:04:22 +00:00
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="note" */%}}
A **notice** disclaimer
{{%/* /notice */%}}
````
2021-07-16 20:04:22 +00:00
{{% notice style="note" %}}
A **notice** disclaimer
2017-08-20 15:10:29 +00:00
{{% /notice %}}
#### Tip
2022-05-23 22:37:03 +00:00
````go
2022-05-23 22:37:03 +00:00
{{%/* notice style="tip" */%}}
A **tip** disclaimer
````
2021-07-16 20:04:22 +00:00
{{% notice style="tip" %}}
A **tip** disclaimer
2022-05-23 22:37:03 +00:00
{{% /notice %}}
2017-08-20 15:10:29 +00:00
#### Warning
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="warning" */%}}
A **warning** disclaimer
2021-07-16 20:04:22 +00:00
{{%/* /notice */%}}
````
2022-05-23 22:37:03 +00:00
{{% notice style="warning" %}}
2022-05-23 22:37:03 +00:00
A **warning** disclaimer
{{% /notice %}}
2021-07-16 20:04:22 +00:00
#### Warning with Non-Default Title and Icon
2021-07-16 20:04:22 +00:00
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="warning" title="Here are dragons" icon="dragon" */%}}
A **warning** disclaimer
{{%/* /notice */%}}
````
2021-07-16 20:04:22 +00:00
{{% notice style="warning" title="Here are dragons" icon="dragon" %}}
2022-05-23 22:37:03 +00:00
A **warning** disclaimer
2017-08-20 15:10:29 +00:00
{{% /notice %}}
#### Warning without a Title and Icon
2022-05-23 22:37:03 +00:00
````go
2022-05-23 22:37:03 +00:00
{{%/* notice style="warning" title=" " icon=" " */%}}
A **warning** disclaimer
{{%/* /notice */%}}
````
2021-07-16 20:04:22 +00:00
{{% notice style="warning" title=" " icon=" " %}}
A **warning** disclaimer
{{% /notice %}}
2021-07-16 20:04:22 +00:00
2022-05-23 22:37:03 +00:00
### By Brand Colors
2017-08-20 15:10:29 +00:00
#### Primary with Title only
2017-08-20 15:10:29 +00:00
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="primary" title="Primary" */%}}
A **primary** disclaimer
2021-07-16 20:04:22 +00:00
{{%/* /notice */%}}
````
2022-05-23 22:37:03 +00:00
{{% notice style="primary" title="Primary" %}}
A **primary** disclaimer
2022-05-23 22:37:03 +00:00
{{% /notice %}}
2021-07-16 20:04:22 +00:00
#### Secondary with Icon only
2021-07-16 20:04:22 +00:00
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="secondary" icon="stopwatch" */%}}
A **secondary** disclaimer
{{%/* /notice */%}}
````
2021-07-16 20:04:22 +00:00
{{% notice style="secondary" icon="stopwatch" %}}
A **secondary** disclaimer
{{% /notice %}}
2021-07-16 20:04:22 +00:00
2022-05-23 22:37:03 +00:00
### By Color
#### Blue without a Title and Icon
2022-05-23 22:37:03 +00:00
````go
2022-05-23 22:37:03 +00:00
{{%/* notice style="blue" */%}}
A **blue** disclaimer
{{%/* /notice */%}}
````
2021-07-16 20:04:22 +00:00
{{% notice style="blue" %}}
A **blue** disclaimer
2022-05-23 22:37:03 +00:00
{{% /notice %}}
2021-07-16 20:04:22 +00:00
#### Green with Title only
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="green" title="Green" */%}}
A **green** disclaimer
2021-07-16 20:04:22 +00:00
{{%/* /notice */%}}
````
2022-05-23 22:37:03 +00:00
{{% notice style="green" title="Green" %}}
A **green** disclaimer
2022-05-23 22:37:03 +00:00
{{% /notice %}}
#### Grey with Icon only
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="grey" icon="bug" */%}}
A **grey** disclaimer
{{%/* /notice */%}}
````
{{% notice style="grey" icon="bug" %}}
A **grey** disclaimer
2022-05-23 22:37:03 +00:00
{{% /notice %}}
#### Orange with Title and Icon
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="orange" title="Orange" icon="bug" */%}}
A **orange** disclaimer
{{%/* /notice */%}}
````
{{% notice style="orange" title="Orange" icon="bug" %}}
A **orange** disclaimer
2022-05-23 22:37:03 +00:00
{{% /notice %}}
#### Red
2022-05-23 22:37:03 +00:00
````go
{{%/* notice style="red" */%}}
A **red** disclaimer
{{%/* /notice */%}}
````
{{% notice style="red" %}}
A **red** disclaimer
{{% /notice %}}
2022-05-23 22:37:03 +00:00
### By Special Color
#### Default with Title and Icon
````go
2022-05-23 22:37:03 +00:00
{{%/* notice style="default" title"Pay Attention to this Note!" icon="skull-crossbones" */%}}
Some serious information.
{{%/* /notice */%}}
````
2022-05-23 22:37:03 +00:00
{{% notice default "Pay Attention to this Note!" "skull-crossbones" %}}
2022-05-23 22:37:03 +00:00
Some serious information.
{{% /notice %}}
#### Transparent with Title and Icon
2022-05-23 22:37:03 +00:00
````go
{{%/* 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 %}}