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 class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="alert al-e5e8d101 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>
</section>

To learn more about the Notification shortcode, please check out the online manual here.