# Notice :: Hugo Relearn Theme
Disclaimers to help you structure your page
Author: Sören Weber

# 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?