Installation Link
Copy the following to the <head>of your HTML
<link rel="stylesheet" href="https://design-with-ira.netlify.app/installationLinks/alert.css">
Alerts are used to display short, important message to the user. To implement this
functionality, add the alert class to your <p> tag
Standard Alerts
Based on the purpose 0f the alert, a second class is to be added to the tag. This class adds background color to the alert.
Status Classes for background
status-plain-bgstatus-info-bgstatus-warning-bgstatus-error-bgstatus-success-bg
To adjust the color of any of the above status classes, in your stylesheet do
:root {
--color-status-success: <color>;
--color-inverse-status-success: <color>;
}
.
This will change the the color wherever you use the status class, that is, in status-warning-outline (borders),
status-warning-bg (bacground), and status-warning (text) classes. The inverse
--color-inverse-status-warning property is used to provide appropriate text color against the status
background.
Thanks for visiting!
This library is open for use
Documentation is Incomplete
Download failed!
Download successful!
Outline Alerts
The outline class is an alternative to the background class.
Status Classes for Outline
status-plain-outlinestatus-info-outlinestatus-warning-outlinestatus-error-outlinestatus-success-outline
Thanks for visiting!
This library is open for use
Documentation is Incomplete
Download failed!
Download successful!