Skip to main content
Search

Alert block

What is an alert block?

The alert block allows you to display a message banner on the page. It’s useful to provide prominent visual cues for communicating an important message.

An alert block can have a call to action if you want to direct the user to further details about the alert.

There are three variations:

  • Information
  • Warning
  • Success

 

Related

View all blocks

Anatomy

Information alert

alert-information

Warning alert

alert-warning

Success alert

alert-success_838

Specification

  • Title (optional)
  • Message (required)
  • Call to action (optional)

Usage guidelines

Do's

  • Use alert blocks sparingly – users have learnt to ignore content that resembles adverts.
  • Messages should be succinct and to the point.
  • A call to action should only be used if the message has follow-up details directly related to it. The call to action must be in the primary style.

Don'ts

  • Do not use the alert block for anything other than content which conveys an important message about the page or subject.
  • Avoid putting extra links and images in the alert block.
  • Do not use secondary or tertiary call to action styles on this block.

Example alert block

Information alert

The information alert text can go here. Lorem ipsum dolor sit amet. Non aliquid recusandae ab laboriosam deleniti ut dolorum ducimus. Sed possimus nulla 33 omnis quisquam eum necessitatibus laudantium.

Related information about this alert