Alerts / notifications

An alert informs users of important and sometimes time-sensitive changes.

Default alert

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.

See more details

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.

See more details

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.

See more details

<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>

Research alerts

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 with title

 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

View all updates

<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>

Accessibility

Avoid opening links in a new tab or window. This can be disorienting for people with low vision or who are navigating via screen reader, especially when there is no warning.