basic alerts
error
This is an error alert — check it out!
<div class='flx flx-maj-stretch pd-xs txt-md alert-size-md txt-secondary bg-secondary'>
<div class='flx flx-min-center'>
<span class="material-icons txt-err mg-right-s">
error
</span>
<p>
This is an error alert — check it out!
</p>
</div>
<span class='material-icons icon-secondary'>close</span>
</div>
warning
This is a warning alert — check it out!
<div class='flx flx-maj-stretch pd-xs txt-md alert-size-md txt-secondary bg-secondary'>
<div class='flx flx-min-center'>
<span class="material-icons txt-warn mg-right-s">
warning
</span>
<p>
This is an warning alert — check it out!
</p>
</div>
<span class='material-icons icon-secondary'>close</span>
</div>
success
This is a success alert — check it out!
<div class='flx flx-maj-stretch pd-xs txt-md alert-size-md txt-secondary bg-secondary'>
<div class='flx flx-min-center'>
<span class="material-icons txt-success mg-right-s">
check_circle
</span>
<p>
This is an success alert — check it out!
</p>
</div>
<span class='material-icons icon-secondary'>close</span>
</div>
solid alerts
error
This is an error alert — check it out!
<div class='flx flx-maj-stretch pd-xs txt-md alert-size-md txt-primary bg-err'>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-s">
error
</span>
<p class="txt-md txt-600">
This is an error alert — check it out!
</p>
</div>
<span class='material-icons icon-primary'>close</span>
</div>
warning
This is an warning alert — check it out!
<div class='flx flx-maj-stretch pd-xs txt-md alert-size-md txt-primary bg-warn'>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-s">
error
</span>
<p class="txt-md txt-600">
This is an warning alert — check it out!
</p>
</div>
<span class='material-icons icon-primary'>close</span>
</div>
success
This is an success alert — check it out!
<div class='flx flx-maj-stretch pd-xs txt-md alert-size-md txt-primary bg-success'>
<div class='flx flx-min-center'>
<span class="material-icons mg-right-s">
check_circle
</span>
<p class="txt-md txt-600">
This is an success alert — check it out!
</p>
</div>
<span class='material-icons icon-primary'>close</span>
</div>
alert css
.alert-size-s {
width: 20rem;
}
.alert-size-md {
width: 30rem;
}