Alert

Share via

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.

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

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
colorNoOptional theme color of the alert, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”.
dismissibleNoOptional flag to indicate the alert is dismissible, defaults to false.
iconNoOptional class and name of a Font Awesome icon to include. The icons use the icon shorthand notation.
typeNoOptional type of the alert, either “danger” or “info”. Generates an alert with related color and icon.
classNoOptional class attribute of the alert element.

Examples

Change the style of your accordion with arguments.

Colored alert

As an example, the following shortcodes displays a simple alert for each theme color.

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

As an example, the following shortcode displays a dismissible alert.

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

Alert with icon

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.

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

Alert of specific type

As an example, the following shortcode displays an informative alert with an icon.

markdown
{{< 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. 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 >}}

As an example, the following shortcode displays a warning with an icon.

markdown
{{< alert type="danger" >}}
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. 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 >}}
Last updated: August 5, 2023 • Add class argument (3547368)
On this page