Alert
An alert is used to display important messages or notifications to users, such as warnings, success messages, or error alerts.
It grabs attention and provides feedback based on user actions or system updates. Users can close the alert message once it has been read.
Key Features
- Contextual Colors: Alerts come in various colours (e.g. success, danger, warning) to convey different message types.
- Dismissible Option: Includes a close button to allow users to dismiss the alert.
- Customisable: Easily styled with additional classes or custom CSS.
Examples
- Form Validation: Show a success message after submitting a form.
- Error Alerts: Notify users of failed actions or input errors.
- System Notifications: Display warnings or important updates to users.
Alert Header (variant : transparent, size 6 - half width)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Alert Header (variant : light, size 9, header size 5)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Alert Header (variant : secondary, size 9, header size 5)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Alert Header (variant : danger, size 9, header size 5)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Alert Header (variant : success, size 9, header size 5)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Alert Header (variant : warning, size 12 - full width)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Variations
You can change the width, custom styles and the header and body text are both full WYSIWYG editors.
Alert Header (Style: Lavender, size 4)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Alert Header (Style Aqua, size 8)
The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.
Buttons
Form Submission: Use buttons to submit forms or trigger form actions. Navigation: Create buttons that link to different pages or sections. You can change the custom styles, and create your own to suit your branding and style.
Read MoreThis webpage was built with Mition
