Magnificent UI

Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Standard Alerts

Simple Alerts can be created using 'alert' class, followed by the variant name as follows.
alert alert--primary alert--secondary alert--info alert--success alert--danger alert--warning alert--dismissable

Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!

Dissmissable Alerts

Dissmissable Alerts can be created by adding following to standard Alerts. alert--dismissable alert--btn__dismiss

This is a dismissable warning alert! (add width:fit-content to reduce the size of the alert)

Note: Used 10px as root font size.