Alert
Use the alert shortcode to display a contextual feedback message.
Use the alert shortcode to display a contextual feedback message. The inner content is used as alert text.
{{< alert color="danger" >}}
A simple danger alert—check it out!
{{< /alert >}}The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| color | No | Optional theme color of the alert, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”. |
| dismissible | No | Optional flag to indicate the alert is dismissible, defaults to false. |
| icon | No | Optional class and name of a Font Awesome icon to include. The icons use the icon shorthand notation. |
Change the style of your accordion with arguments.
As an example, the following shortcodes displays a simple alert for each theme color.
{{< 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 danger warning 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 >}}As an example, the following shortcode displays a dismissible alert.
{{< alert color="danger" dismissible="true" >}}
A dismissible alert—check it out!
{{< /alert >}}As an example, the following shortcode displays an alert with an icon. The icon is resized to size 2x and pulled to the left by default.
{{< alert color="danger" icon="fas triangle-exclamation" >}}
An illustrated alert—check it out!
{{< /alert >}}