Skip to Content search facebook instagram pinterest twitter youtube


Site notifications are shown when messages need to be displayed to the user, i.e. when they log in to a members area. For example:

  • Confirmation message
  • Error message

Modifier classes


The outer notification list <ul> wrapper has these modifier classes:

  • all-type-confirm - All notifications inside the list are confirmations
  • all-type-error - All notifications inside the list are errors
  • all-type-mixed - Notifications inside the list are mixed

List items

The list items inside the notification list has these modifier classes available:

  • confirm - Confirmation message
  • error - Error message

List item content

  • notification--text - Content inside the notification is text
  • notification--action - Content inside the notification is an action (i.e. <a> link)

Example of a site notification confirm message HTML

<ul class="messages all-type-confirm">
    <li class="confirm"><span class="notification--text">Now logged in</span></li>