Alert & Notification Element

Alerts and Notifications are very important part of website. They are small, but you can not ignore them. There is a General Alert, an Error Alert, a Success Alert, a Notice Alert, and the aforementioned Custom Alert. Riode Alerts and Notification Element offers you simple but powerful helper classes to build it.

You have done 5 actions.
SUCCESS The page has been added.

Some Message

Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id pariat minim vot nulla aliqualuptate.

Do ThisOr This

Please go to Alert & Notification Element Page to see how it shows for a visual overview.

How To Use The Alert & Notification Element

Alert & Notification Element literally shows its character well. It offers various kinds of alert types and styles.

Step 1. Create, or choose the Column you want to add alert or notification.

Step 2. Select Text Editor from the Element List.

Step 3. Fill Text Editor’s text with HTML. You can use Helper Classes to build your own alert or notification. notes: please look at below “Element Content Options” for alert & notification’s layout. And reference below “Element Style Options” for alert & notification’s styling.

Step 4. Save all changes when you are finished customizing your alert or notification.

Element Content Options

Here are Helper Classes to build your own Alert & Notification layout.

“alert” – Configures your any tags to alert or notification.

“alert-simple” – Configures your any tags to alert simple or notification simple layout.

“alert-icon” – Configures your alert with icon.

“alert-message” – Configures your alert with message layout.

“alert-error” – Configures your alert like error type.

“alert-button” – Configures your alert with buttons.

“alert-warning” – Configures your alert like warning type.

“alert-summary” – Configures your alert like summary type.

Element Style Options

Here are Helper Classes to customize your alerts and notifications easily.

“alert-primary” – Makes background color as primary color of your site.

“alert-round” – Makes borders rounded.

“alert-light” – Makes background color as light color of your site.

“alert-dark” – Makes background color as dark-color of your site.

Demos