Alerts

Alerts for multiple forms of notifications on a UI.


Default Block Level Alert

<div class="has-bg-grey-100 h-50">
<nav class="nav">
<div class="nav-left">
<img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
</div>
<div class="nav-responsive">
<div class="nav-center">
<a class="nav-item is-active">Visit</a>
<a class="nav-item">Activities</a>
<a class="nav-item">Learn</a>
<a class="nav-item">Donate</a>
</div>
</div>
</nav>
<div class="alert is-block is-warning m-0 m-auto m-t-16 p-r-20 w-fitcontent">
<span class="d-icon d-warning"></span>
<div>
<h5 class="m-b-0">Masks are required for everyone, regardless of location or vaccination status.</h5>
</div>
</div>
</div>

Block Level Alert with Context

<div class="has-bg-grey-100 h-50">
<nav class="nav">
<div class="nav-left">
<img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
</div>
<div class="nav-responsive">
<div class="nav-center">
<a class="nav-item is-active">Visit</a>
<a class="nav-item">Activities</a>
<a class="nav-item">Learn</a>
<a class="nav-item">Donate</a>
</div>
</div>
</nav>
<div class="alert is-block is-info m-0 m-auto m-t-16 p-r-20 w-fitcontent">
<span class="d-icon d-information-circle"></span>
<div>
<h5 class="m-b-0">Masks are required for everyone, regardless of location or vaccination status.</h5>
<p>Additional details are available at www.nps.gov/coronavirus. Before visiting</p>
<p>please check the park website to determine its operating status. Please recreate responsibly.</p>
</div>
</div>
</div>

Inline Alert

<div class="has-bg-grey-100 h-50">
<nav class="nav">
<div class="nav-left">
<img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
</div>
<div class="nav-responsive">
<div class="nav-center">
<a class="nav-item is-active">Visit</a>
<a class="nav-item">Activities</a>
<a class="nav-item">Learn</a>
<a class="nav-item">Donate</a>
</div>
</div>
</nav>
<div class="alert is-inline has-bg-status-danger align-items-center">
<p class="is-bold is-white flex-auto">Masks are required for everyone, regardless of location or vaccination status</p>
<span class="link m-l-auto p-0 ">
<span class="d-icon d-close is-sub is-white"></span>
</span>
</div>
</div>

Default Notification Alert

<div class="has-bg-grey-100 h-50" style="position: relative;">
<nav class="nav">
<div class="nav-left">
<img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
</div>
<div class="nav-responsive">
<div class="nav-center">
<a class="nav-item is-active">Visit</a>
<a class="nav-item">Activities</a>
<a class="nav-item">Learn</a>
<a class="nav-item">Donate</a>
</div>
</div>
</nav>
<div class="position-absolute top-9 w-full">
<div class="alert is-warning m-0 m-auto">
<span class="d-icon d-warning"></span>
<div>
<h5>Masks are required for everyone, regardless of location or vaccination status</h5>
</div>
<span class="link close is-secondary"
><span class="d-icon d-close is-sub"></span
></span>
</div>
</div>
</div>

Notification Alert with Context

<div class="has-bg-grey-100 h-50 position-relative">
<nav class="nav">
<div class="nav-left">
<img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
</div>
<div class="nav-responsive">
<div class="nav-center">
<a class="nav-item is-active">Visit</a>
<a class="nav-item">Activities</a>
<a class="nav-item">Learn</a>
<a class="nav-item">Donate</a>
</div>
</div>
</nav>
<div class="w-full position-absolute top-9">
<div class="alert is-info m-0 m-auto" style="width: 80%">
<span class="d-icon d-information-circle"></span>
<div>
<h5>Masks are required for everyone, regardless of location or vaccination status</h5>
<p>Additional details are available at www.nps.gov/coronavirus. Before visiting, please check the park website to determine its operating status. Please recreate responsibly.</p>
</div>
<span class="link close is-secondary"
><span class="d-icon d-close is-sub"></span
></span>
</div>
</div>
</div>

Default Toast Alert

<div class="has-bg-grey-100 h-50">
<div class="box has-bg-grey-800 br-6 flex space-between p-x-20 p-y-20 align-items-center position-fixed bottom-2 right-6 h-5">
<p class="is-white"> Membership application sent! </p>
<div>
<button class="button is-text is-white min-w-14"> Undo </button>
<i class="d-icon d-close is-default is-grey-100"></i>
</div>
</div>
</div>

Toast Alert with context

<div class="has-bg-grey-100 h-50">
<div class="box has-bg-grey-800 br-6 p-x-12 p-y-8 m-0 m-auto position-fixed min-h-16 bottom-2 left-6">
<div class="flex space-between align-items-center">
<p class="is-white is-bold"> Membership application sent! </p>
<div>
<button class="button is-text is-white min-w-14"> Undo </button>
<i class="d-icon d-close is-default is-grey-100"></i>
</div>
</div>
<p class="is-white font-12">You will recieve your I.D. Card through USPS. Please allow 3-5 Business Days.</p>
</div>
</div>