{"id":6990,"date":"2019-11-12T14:31:11","date_gmt":"2019-11-12T19:31:11","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=6990"},"modified":"2025-11-18T09:38:28","modified_gmt":"2025-11-18T14:38:28","slug":"notification-boxes","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/notification-boxes\/","title":{"rendered":"Notification Boxes"},"content":{"rendered":"

Notification boxes are colored boxes that allow you to differentiate content on a page.<\/p>\n

\n
\n
\n

Success Box<\/h2>\n

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.<\/p>\n<\/div>\n

\n

Warning Box<\/h2>\n

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.<\/p>\n<\/div>\n

\n

Danger Box<\/h2>\n

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.<\/p>\n<\/div>\n

\n

Light Gray Information Box<\/h2>\n

Add the notification-gray<\/strong> class to the Custom Class<\/strong> field of an Information Box<\/strong> to get the light gray color. Note: this only works with the Information<\/strong> Box. See the instructions below for more detail.<\/p>\n<\/div>\n<\/div>\n

\n
\n

Information Box<\/h2>\n

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.<\/p>\n<\/div>\n

\n

Med. Blue Information Box<\/h2>\n

Add the notification-med-blue<\/strong> class to the Custom Class<\/strong> field of an Information Box<\/strong> to get the medium blue color. Note: this only works with the Information<\/strong> Box. See the instructions below for more detail.<\/p>\n<\/div>\n

\n

Dark Blue Information Box<\/h2>\n

Add the notification-dark-blue<\/strong> class to the Custom Class<\/strong> field of an Information Box<\/strong> to get the dark blue color. Note: this only works with the Information<\/strong> Box. See the instructions below for more detail.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

NOTE: Columns<\/a> were used to lay out the above sample boxes into two columns.<\/p>\n

\n

How to Add a Notification Box<\/h2>\n
    \n
  1. Place your cursor in the location where you wish the notification box to appear.<\/li>\n
  2. Select Notifications<\/strong> from the Content Elements <\/strong>dropdown menu under Basic Elements<\/strong>\"Notification<\/li>\n
  3. Tip<\/strong>: If you don\u2019t see the Content Elements<\/strong> button in the editor, click the Toolbar Toggle<\/strong> button. This toggles the visibility of\u00a0a collection of buttons in the editor.\u00a0 \"\"<\/li>\n
  4. A dialog box will appear that allows you to configure the notification box settings:\n
      \n
    1. Choose a Style<\/strong> – this correlates to the color of the box.\u00a0 There are 4 default color options:\n