Notification Boxes

Notification boxes are colored boxes that allow you to differentiate content on a page.

Success Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam. In at imperdiet purus, a vestibulum risus.

Warning Box

Danger Box

Light Gray Information Box

Add the notification-gray class to the Custom Class field of an Information Box to get the light gray color. Note: this only works with the Information Box. See the instructions below for more detail.

Information Box

Med. Blue Information Box

Add the notification-med-blue class to the Custom Class field of an Information Box to get the medium blue color. Note: this only works with the Information Box. See the instructions below for more detail.

Dark Blue Information Box

Add the notification-dark-blue class to the Custom Class field of an Information Box to get the dark blue color. Note: this only works with the Information Box. See the instructions below for more detail.

NOTE: Columns were used to lay out the above sample boxes into two columns.

How to Add a Notification Box

Place your cursor in the location where you wish the notification box to appear.
Select Notifications from the Content Elements dropdown menu under Basic Elements
Tip: If you don鈥檛 see the Content Elements button in the editor, click the Toolbar Toggle button. This toggles the visibility of聽a collection of buttons in the editor.聽
A dialog box will appear that allows you to configure the notification box settings:
1. Choose a Style – this correlates to the color of the box.聽 There are 4 default color options:
  - Success聽 = Green box
  - Information = blue box
  - Warning = Yellow box
  - Danger = Red box
2. Custom Class (optional) – for Information Boxes only, custom classes can be applied to modify the color:
  1. Medium Blue 鈫� add notification-med-blue.
  2. Dark Blue 鈫捖烬诲诲 notification-dark-blue.
  3. Note: These custom classes only work with the Information Box.
Click the Insert Notification button and the shortcode will be added to the page.
The shortcode without a Custom Class will look something like this:
[notification type="alert-success" close="false" ]Your Notification[/notification]
The shortcode with a Custom Class will look something like this:
[notification type="alert-info" close="false" class="notification-med-blue"]Your Notification[/notification]
Replace the Your Notification text with the desired content, ensuring that you don’t delete the brackets [聽 ].