An alert informs users of important and sometimes time-sensitive changes.
Alerts / notifications
The default alert is used in pagebuilder widgets.
Alert 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.
Announcement 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.
News 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.
<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>
This alert is used on non-pagebuilder pages, such as research and library pages.
Alert
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.
Announcement
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.
News
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.
<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>
Announcement
Applications are now invited for the scheme
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
<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>