# Alert

Use the alert shortcode to display a contextual feedback message.

## Overview

Use the `alert` shortcode to display a contextual feedback message. The inner content is used as alert text.

### Colored alert

Set `color` to one of the available theme colors to adjust the appearance of the alert.

```markdown
{{< alert color="primary" >}}
    A simple primary alert—check it out!
{{< /alert >}}

{{< alert color="secondary" >}}
    A simple secondary alert—check it out!
{{< /alert >}}

{{< alert color="success" >}}
    A simple success alert—check it out!
{{< /alert >}}

{{< alert color="danger" >}}
    A simple danger alert—check it out!
{{< /alert >}}

{{< alert color="warning" >}}
    A simple warning alert—check it out!
{{< /alert >}}

{{< alert color="info" >}}
    A simple info alert—check it out!
{{< /alert >}}

{{< alert color="light" >}}
    A simple light alert—check it out!
{{< /alert >}}

{{< alert color="dark" >}}
    A simple dark alert—check it out!
{{< /alert >}}
```

### Dismissible alert

Set `dismissible` to `true` to allow the user to dismiss the alert.

```markdown
{{< alert color="danger" dismissible="true" >}}
    A dismissible alert—check it out!
{{< /alert >}}
```

### Alert with icon

Add an `icon` family and attribute to include an icon in the alert. The alert is resized to size `2x` and pulled to the left by default.

```markdown
{{< alert color="danger" icon="fas triangle-exclamation" >}}
    An illustrated alert—check it out!
{{< /alert >}}
```

### Alert of specific type

Set `alert-type` to a specific type such as `info` or `danger` to quickly add an alert with an appropriate color and icon.

```markdown
{{< alert alert-type="info" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
{{< /alert >}}

{{< alert alert-type="danger" >}}
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
{{< /alert >}}
```

## Styling

The file `assets/scss/components/_alert.scss` defines the Hinode-specific styling of the `alert` shortcode. Check the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/alert/#css) for additional styling options.

```scss
.alert code {
    color: inherit;
}

/* stylelint-disable declaration-block-no-redundant-longhand-properties */
.alert a {
    color: inherit;
    
    &:link,
    &:visited,
    &:hover,
    &:active {
        text-decoration-line: underline;
        text-decoration-style: dotted;
        text-decoration-color: var(--bs-body);
    }    
}
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
```

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `alert-type` | select |  |  | Type of the alert, generates an alert with related color and icon. Supported values: [`danger`, `info`]. |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `color` | select |  | `danger` | Theme color of the element. Supported values: [`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `white`, `black`, `body`, `body-tertiary`]. |
| `dismissible` | bool |  |  | Flag to indicate the alert is dismissible. |
| `icon` | string |  |  | Icon to include. You can use shorthand notation such as `fas sort` to include a Font Awesome icon. The argument also supports files with an `.svg` or `.json` extension. |