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. 

// CSS
@import url("https://magnificentui.netlify.app/src/components/alert/alert.css");

// HTML
<link rel="stylesheet" href="https://magnificentui.netlify.app/src/components/alert/alert.css">

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! 
<div class="alert alert--primary">
	//Your Alert text goes here..
  </div>
  <div class="alert alert--secondary">
	//Your Alert text goes here..
  </div>
  <div class="alert alert--info">
	//Your Alert text goes here..
  </div>
  <div class="alert alert--success">
	//Your Alert text goes here..
  </div>
  <div class="alert alert--danger">
	//Your Alert text goes here..
  </div>
  <div class="alert alert--warning">
	//Your Alert text goes here..
  </div>

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) 
//Dismiss Alert
<div id="alert--warning--dismiss" class="alert alert--dismissable">
  <i class='bx bx-bug' ></i>
  //Your Alert text goes here..
  <button id="alert--warning--dismiss-btn" class="btn--icon alert--btn__dismiss">
	<i class='bx bx-x'>
	</i>
  </button>
</div>

Note: Used 10px as root font size.