The Alert Element is used to display short, high-visibility messages inside your layout. It works well for warnings, confirmations, notices, errors, or any message that should stand out from surrounding content. The source page presents four preset alert styles plus one fully customizable option: General, Error, Success, Notice, and Custom.
Preset alert types are designed for quick use. Choose the style that matches the purpose of the message, add your text, and place the element where needed. The Custom type opens additional design controls so the alert can match a specific brand style or layout requirement.
How To Use The Alert Element
Add the Alert Element to a column in the Builder, then choose the alert type you want to use. For standard alerts, most of the styling is handled automatically, so setup is fast. For the custom version, more controls become available, including color, icon, border, and spacing settings. The source also notes that alerts are dismissible by default, with an option to keep them permanently visible.
After selecting the style and adjusting the available settings, enter your message in the content field. You can then fine-tune alignment, spacing, visibility, animation, and developer-facing attributes such as CSS class or CSS ID.
Alert Settings
| Heading | Description |
|---|---|
| Alert Type | Choose the type of alert to display. Use one of the preset styles for quick setup, or select Custom to unlock advanced styling controls. |
| Accent Color | Available for the custom alert type. Sets the main accent color used for the border, icon, and text. |
| Background Color | Available for the custom alert type. Defines the background fill of the alert box. |
| Border Size | Available for the custom alert type. Controls the border thickness in pixels. |
| Border Radius | Rounds the corners of the alert box. Accepts valid CSS units such as px, %, em, or rem. |
| Select Custom Icon | Lets you choose an icon for the alert. Selecting the same icon again removes it. |
| Content Alignment | Controls how the alert content is aligned inside the box. |
| Padding | Adjusts the internal spacing around the content. Supports values such as 10px or 10%. |
| Margin | Sets the outer spacing around the alert element. Accepts any valid CSS unit. |
| Text Transform | Changes the text casing style used inside the alert. |
| Link Color Inheritance | Determines whether links inside the alert should inherit the same color as the alert text. |
| Dismiss Button | Controls whether visitors can close the alert. Disable it when the message should remain visible. |
| Box Shadow | Adds a shadow below the alert box for extra separation from surrounding content. |
| Alert Content | This is the main message shown inside the alert box. |
| Element Visibility | Show or hide the alert on small, medium, or large screens. More than one screen size can be selected. |
| Element Sticky Visibility | Controls whether the element is visible when its parent container is in normal mode or sticky mode. |
| CSS Class | Adds one or more custom classes to the wrapping HTML element. |
| CSS ID | Adds a custom ID to the wrapping HTML element. |
Additional
| Heading | Description |
|---|---|
| Conditional Rendering | Allows the alert to be included only when specific conditions are met. |
| Animation Type | Selects the animation used when the alert appears. |
| Direction of Animation | Defines the direction from which the animation enters. |
| Animation Color | Sets the color used for the animation effect. |
| Speed of Animation | Controls the animation speed in seconds. |
| Animation Delay | Adds a delay before the animation begins. |
| Offset of Animation | Determines when the animation should begin as the element enters view. |
| Conditional Logic | Adds logic for cases where the alert element is used inside a form. |