Alerts / notifications
An alert informs users of important and sometimes time-sensitive changes.
<div class="notification is-danger is-light">
<p class="is-size-5"><span class="fas fa-bullhorn" aria-hidden="true"></span> <strong>Alert</strong>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.</p>
<p class="is-size-7 m-bottom-0 has-text-right"><a href="#">See more details</a> <span class="fa fa-arrow-right" aria-hidden="true"></span></p>
</div>
<div class="notification is-warning is-light">
<p class="is-size-5"><span class="fas fa-bullhorn" aria-hidden="true"></span> <strong>Announcement</strong>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.</p>
<p class="is-size-7 m-bottom-0 has-text-right"><a href="#">See more details</a> <span class="fa fa-arrow-right" aria-hidden="true"></span></p>
</div>
<div class="notification is-success is-light">
<p class="is-size-5"><span class="fas fa-bullhorn" aria-hidden="true"></span> <strong>News</strong>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.</p>
<p class="is-size-7 m-bottom-0 has-text-right"><a href="#">See more details</a> <span class="fa fa-arrow-right" aria-hidden="true"></span></p>
</div><div class="notification is-danger is-light">
<h2 class="is-size-5 m-bottom-10"><span class="fa fas fa-exclamation-triangle" aria-hidden="true"></span> <strong>Alert</strong></h2>
<div class="cms-content">
<p>Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a href="#">felis venenatis efficitur</a>.</p>
</div>
</div>
<div class="notification is-warning is-light">
<h2 class="is-size-5 m-bottom-10"><span class="fas fa-bullhorn" aria-hidden="true"></span> <strong>Announcement</strong></h2>
<div class="cms-content">
<p>Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a href="#">felis venenatis efficitur</a>.</p>
</div>
</div>
<div class="notification is-success is-light">
<h2 class="is-size-5 m-bottom-10"><span class="fas fa-flag" aria-hidden="true"></span> <strong>News</strong></h2>
<div class="cms-content">
<p>Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a href="#">felis venenatis efficitur</a>.</p>
</div>
</div><div class="notification has-background-primary has-text-grey-dark">
<h2 class="is-size-4 m-bottom-10"><span class="fas fa-bullhorn" aria-hidden="true"></span> Announcement</h2>
<h3 class="is-size-2 has-text-weight-bold m-bottom-10" style="line-height: 1.2;">Applications are now invited for the scheme</h3>
<p class="is-size-5">Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit</p>
<p class="is-size-5 m-bottom-0 has-text-right"><a href="#">View all updates</a> <span class="fa fa-arrow-right" aria-hidden="true"></span></p>
</div>