Content
Notification
A callout box for tips, warnings and success messages.
Live demo
See it in action
Eight colour schemes
Note! A primary notification.
Note! A secondary notification.
Success! Saved successfully.
Information! Heads up: something worth noting.
Warning! Careful: double-check this.
Error! Something went wrong.
Note! A light notification.
Note! A dark notification.
Border treatments
Information! Filled (default): solid tinted background.
Information! Outline: transparent background, coloured border.
Information! Accent-left: a 4px coloured left bar.
Layouts
Success! Inline: icon, label and message on one row.
Success!
Stacked: label sits on its own line above the message.
Custom icon, label & dismissible
Heads up A custom emoji icon and a custom label.
Information! Dismissible: includes a close button.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<div class="alert al-a7997928 alert-info" role="alert">
<span class="alert__icon" aria-hidden="true"><i class="fa-solid fa-circle-info"></i></span>
<strong>Information!</strong>
<span class="alert__message">This is a notification message.</span>
</div>
</div>
</div>
</div>
</section>To learn more about the Notification shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.