Docs
Alert
Posted on December 29, 2023 (Last modified on June 10, 2025) • 5 min read • 894 wordsUse 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.
A simple danger alert—check it out!
markdown
{{< alert color="danger" >}}
A simple danger alert—check it out!
{{< /alert >}}
Arguments
The shortcode supports the following arguments:
Name | Type | Required | Default | Comment |
---|---|---|---|---|
alert-type | select |
v1.0.0
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. |
||
type | select |
v1.0.0
Use alert-type instead. Type of the alert, generates an alert with related color and icon. Supported values: [danger , info ]. |
Name | Type | Required | Default |
---|---|---|---|
alert-type | select | ||
v1.0.0
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. |
|||
type | select | ||
v1.0.0
Use alert-type instead. Type of the alert, generates an alert with related color and icon. Supported values: [danger , info ]. |
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.
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert-check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
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.
A dismissible alert—check it out!
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.
An illustrated alert—check it out!
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.
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.
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. 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.
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.
markdown
{{< alert 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 >}}