{"id":6977,"date":"2018-02-27T15:25:00","date_gmt":"2018-02-27T20:25:00","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=6977"},"modified":"2025-11-18T09:38:36","modified_gmt":"2025-11-18T14:38:36","slug":"styled-boxes","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/styled-boxes\/","title":{"rendered":"Panel Boxes"},"content":{"rendered":"

A Panel Box consists of three main components: the Header<\/strong>, Content<\/strong> and Footer<\/strong>. By default, only the Header and Content<\/strong> are displayed. If the Show Footer<\/strong> option is selected during setup, the footer component will display as well.<\/p>\n

\n
\n
\n
\nSimple Panel<\/strong><\/div>\n
\nLorem 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.<\/div>\n
\nThis is the panel footer.<\/div>\n<\/div>\n<\/div>\n
\n
\n
\nInformation Panel<\/strong><\/div>\n
\nLorem 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.<\/div>\n
\nThis is the panel footer.<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\nSuccess Panel<\/strong><\/div>\n
\nLorem 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.<\/div>\n
\nThis is the panel footer.<\/div>\n<\/div>\n<\/div>\n
\n
\n
\nPrimary Panel\u00a0<\/strong><\/div>\n
\nLorem 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.<\/div>\n
\nThis is the panel footer.<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\nWarning Panel<\/strong><\/div>\n
\nLorem 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.<\/div>\n
\nThis is the panel footer.<\/div>\n<\/div>\n<\/div>\n
\n
\n
\nDark Blue Primary Panel<\/strong><\/div>\n
\nAdd panel-dark-blue<\/strong> to the Custom Class<\/strong> field of a Primary Panel<\/strong> to get the dark blue color. Note: this only works with the Primary Panel. See below for more detail.<\/div>\n
\nThis is the panel footer.<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\nDanger Panel\u00a0<\/strong><\/div>\n
\nLorem 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.<\/div>\n
\nThis is the panel footer.<\/div>\n<\/div>\n<\/div>\n
\n<\/div>\n<\/div>\n

Columns shortcode<\/a> was used in the above example to lay the boxes out side by side in two columns.<\/p>\n

\n

How to Add a Panel Box<\/h2>\n
    \n
  1. Place your cursor where you want the Panel Box to appear.<\/li>\n
  2. Select Panels<\/strong> from the Content Elements<\/strong>\u00a0dropdown menu<\/strong> under Interactive<\/strong>.
    \n\"Where<\/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 a collection of buttons in the editor.\"Toolbar<\/li>\n
  4. A dialog box will appear that allows you to configure the panel box settings:\n
      \n
    1. Choose a Style<\/strong> – this correlates to the color of the box.\u00a0 There are 6 default color options:\n