Skip to main content

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



Information alert


Warning alert


Success alert



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

Usage guidelines


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


  • 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