{"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-04-14T10:48:12","modified_gmt":"2025-04-14T14:48:12","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
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
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
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
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 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 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 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 They use columns<\/a> to create the three-column layout and place a notification box inside each column.<\/p>\n They use columns<\/a> to create the two-column layout and place content in the first column and a notification box in the second.<\/p>\n <\/p>\n Psychiatry used the green Success box to draw attention to the Suicide Prevention Lifeline on the Integrated Emotional Support Program<\/a> page.<\/p>\n The Pediatric Education web site uses notification boxes to highlight different aspects of the Internal Medicine – Pediatrics Residency Program<\/a>.<\/p>\n <\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Notification boxes are colored boxes that allow you to differentiate content on a page. 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 … Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2212,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-6990","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/6990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=6990"}],"version-history":[{"count":41,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/6990\/revisions"}],"predecessor-version":[{"id":14191,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/6990\/revisions\/14191"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=6990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Information Box<\/h2>\n
Med. Blue Information Box<\/h2>\n
Dark Blue Information Box<\/h2>\n
\nHow to Add a Notification Box<\/h2>\n
\n
<\/li>\n
<\/li>\n
\n
\n
\n
<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n
\n[notification type=\"alert-success\" close=\"false\" ]Your Notification[\/notification]<\/code><\/li>\n
\n[notification type=\"alert-info\" close=\"false\" class=\"notification-med-blue\"]Your Notification[\/notification]<\/code><\/li>\n
\nExamples<\/h2>\n
Urology<\/h3>\n
<\/span><\/p>\n
TEACCH Autism Program<\/h3>\n
<\/span><\/p>\n
Psychiatry<\/h3>\n
<\/span><\/p>\n
Pediatric Education<\/h3>\n
<\/span><\/p>\n