{"id":9684,"date":"2020-12-16T13:22:53","date_gmt":"2020-12-16T18:22:53","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=9684"},"modified":"2025-11-18T09:39:31","modified_gmt":"2025-11-18T14:39:31","slug":"full-width-sections","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/","title":{"rendered":"Full-Width Sections"},"content":{"rendered":"<p><strong>Full-Width Sections<\/strong> let you place content over customizable background colors, images, or videos. They span either the full width of the browser window or the main content area, depending on page structure. These sections require knowledge of <strong>HTML<\/strong>, <strong>CSS<\/strong>, and <strong>digital accessibility best practices<\/strong>. Remember to ensure that contrast between text and its background meets the <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">minimum color contrast standards<\/a>.<\/p>\n<p><strong>For an easier alternative<\/strong>, use <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/notification-boxes\/\"><strong>Notification Boxes<\/strong><\/a>, which provide a similar look without requiring coding knowledge.<\/p>\n<h2>Understanding Full-Width Sections<\/h2>\n<ul>\n<li><strong>On pages without sidebars<\/strong> (such as homepages), full-width sections span the <strong>entire width<\/strong> of the browser window.<\/li>\n<li><strong>On pages with sidebars<\/strong> (such as internal pages with navigation), full-width sections span only the <strong>main content area<\/strong>.<\/li>\n<li>This documentation page contains <strong>left-hand navigation<\/strong> (a sidebar), so the examples below demonstrate full-width sections in this type of layout.<\/li>\n<li>View the alternative example page that demonstrates <strong><a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/\">what full-width sections look like on pages without sidebars<\/a><\/strong>.<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>How to Add Full-Width Sections<\/h2>\n<ol>\n<li>Place your cursor where you want the full width section to start.<\/li>\n<li>Click on the <strong>Shortcodes<\/strong> button in the editor then <strong>Full Width Sections<\/strong>.<\/li>\n<li>Choose from the three available options:\n<ul>\n<li>Background Color<\/li>\n<li>Parallax Background Image<\/li>\n<li>Background Video Section<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><a class=\"imageBorder\" href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png\"><img loading=\"lazy\" decoding=\"async\" class=\"imageBorder alignnone wp-image-12060\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png\" alt=\"Screenshot of the WordPress editor showing where to find the option for the full width section.\" width=\"496\" height=\"190\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png 1600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87-300x115.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87-1024x392.png 1024w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87-768x294.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87-1536x588.png 1536w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87-600x230.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87-560x214.png 560w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/a><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Background Color<\/h2>\n<p>The <strong>Background Color<\/strong> option generates a full-width section with a colored background.<\/p>\n<p><code>[heels_full_width color=\"#f5f5f5\" class=\"\"]Content[\/heels_full_width]<\/code><\/p>\n<h3>Add Your Content<\/h3>\n<p>Simply replace the &#8220;<strong>Content<\/strong>&#8221; place-holder text in the above code with your own content. Whatever content you add (text, images, links, headers, etc.), will display inside the color box.<\/p>\n<h3>Customize the Background Color<\/h3>\n<p>To customize the color of the full-width section, simply change the hexadecimal color code that says <strong>color=&#8221;#f5f5f5&#8243;<\/strong>. The <strong>#f5f5f5<\/strong> is the hexadecimal color for the default light gray. Simply replace it with the color of your choice. View our <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">Color and Contrast<\/a> page for hex codes for School of Medicine brand colors.<\/p>\n<p><strong>Important<\/strong>: for legibility purposes, you must ensure there is enough contrast between the background color and any overlaying text or content. The default text color is dark gray (#2E2E2E). If this color does not have a minimum contrast ratio of 4.5:1 to the background color, then either the text or background color need to be modified until it does. Refer to the <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">Color and Contrast<\/a> documentation for guidelines.<\/p>\n<p>If you have trouble implementing a Full-Width section, <a href=\"https:\/\/www.med.unc.edu\/webguide\/getting-help\/\">reach out to the Web Team for assistance<\/a> or use a <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/notification-boxes\/\">Notification Box<\/a>. The Notification Boxes don&#8217;t have these issues because they are pre-styled.<\/p>\n<h3>Light Gray Background (Default)<\/h3>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#f5f5f5;\" class=\"full-width-contained whitebackground \">\n<p style=\"font-size: 2.825rem;\">Full-Width Section with Background Color<\/p>\n<p>This is the default Background Color option with a light gray background of #f5f5f5.<\/p>\n<\/div>\n<h3>SOM Dark Blue Background with Centered White Text<\/h3>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#08446D;\" class=\"full-width-contained whitebackground text-white\">\n<p style=\"text-align: center; font-size: 2.825rem;\">Full-Width Section with Background Color<\/p>\n<p style=\"text-align: center;\">The School of Medicine (SOM) blue (#13294B) has been set as the background color. The overlaid text has been centered and styled white (#ffffff).<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#E2EFF8;\" class=\"full-width-contained whitebackground \">\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-4 col-md-4 col-xs-12 col-sm-4 oscitas-bootstrap-container\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imageBorder alignnone size-medium wp-image-10289\" style=\"margin-top: 15px;\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg\" alt=\"stock image of a doctor\" width=\"271\" height=\"300\" \/><\/p>\n<\/div>\n<div class=\"col-lg-8 col-md-8 col-xs-12 col-sm-8 oscitas-bootstrap-container\">\n<p style=\"font-size: 2.825rem;\">Full-Width Section with Background Color<\/p>\n<p>This is the <strong>Background Color<\/strong> option using light blue (#e2eff8) as the background color. The default font color (#2e2e2e) provides adequate contrast and did not need to be modified. However, the color of the link below failed the color contrast and was modified to a slightly darker blue color (#1c6fa6).<\/p>\n<p>The <a style=\"color: #266d9c;\" href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/columns\/\">columns shortcode<\/a> was nested inside the full-width shortcode to obtain the 2-column layout for the overlaid content.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Parallax Background Image<\/h2>\n<p>The <strong>Parallax Background Image<\/strong> creates a scrolling effect where the background image moves at a different speed than the content as you scroll up and down the page. The background image will get cropped both horizontally and vertically.\u00a0 The vertical display will change as you scrolls up\/down the page. The horizontal display will vary based on browser width. Look at the examples below and scroll up\/down the page as well as resize the width of your browser window to see these effects in action.<\/p>\n<p>The initial shortcode will look like this:<\/p>\n<p><code>[heels_full_parallax color=\"#f5f5f5\" class=\"\" background=\"your image url\"]Content[\/heels_full_parallax]<\/code><\/p>\n<h3>Define the Background Image<\/h3>\n<ol>\n<li>Upload the image to the site&#8217;s <strong>Media<\/strong> folder.<\/li>\n<li><strong>Copy the image URL<\/strong> from the <strong>Media Attachment Details<\/strong>.\n<ol>\n<li>In the Media library, click on the image to bring up the <strong>Attachment Details<\/strong> panel.<\/li>\n<li>Find the <strong>Copy Link<\/strong> field and copy the url. This is the image url which you will paste into the shortcode in the next step.<\/li>\n<\/ol>\n<\/li>\n<li>Go back to the web page, event, post, etc. where you are adding the full-width parallax image. In the shortcode, look for <strong>background=&#8221;your image url&#8221;<\/strong>. Replace <strong>your image url<\/strong> with the url you copied in step 2 above. Don&#8217;t delete the quotes, just replace the content within the quotes.<\/li>\n<\/ol>\n<h4>Image Recommendations<\/h4>\n<ul>\n<li>Try to choose a\u00a0<strong>wide, landscape image<\/strong>\u00a0(at least\u00a0<strong>2,000px wide<\/strong>).<\/li>\n<li>Simple abstract images tend to work best.<\/li>\n<li>Avoid images with faces or important details, as cropping will occur.<\/li>\n<li>You may wish to use Photoshop or some other graphics program to lighten or darken the image.<\/li>\n<\/ul>\n<h3>Add Your Content<\/h3>\n<p>Replace the &#8220;<strong>Content&#8221;<\/strong> place-holder text with your own content. Any elements you add\u2014such as text, images, links, or headers\u2014will be displayed over the background image. To ensure readability, all content must meet <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">color contrast guidelines<\/a>. If the background image is busy or makes the text difficult to read, consider nesting a <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/notification-boxes\/\">Notification Box<\/a> inside the Full-Width Section and placing the content within it. This will help the content stand out from the background image.<\/p>\n<h3>Customize the Background Color<\/h3>\n<p>Defining a background color is still important, as it will be displayed if the background image fails to load.<\/p>\n<ul>\n<li>If your background image is light, choose a light background color.<\/li>\n<li>If your background image is dark, use a dark background color.<\/li>\n<\/ul>\n<p>To maintain readability, ensure sufficient <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">color contrast<\/a> between the background and overlaying content. If needed, adjust either the background color or text color to meet accessibility guidelines.<\/p>\n<p>For details on how to modify the background color, refer to the <strong>Customize the Background Color<\/strong> section above.<\/p>\n<h3>Examples<\/h3>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-7 col-md-7 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p>In the example below, a\u00a0<b>larger version<\/b>\u00a0of the image shown to the right was used. Notice how the\u00a0<b>background image is cropped<\/b>\u00a0and how it\u00a0<b>shifts<\/b>\u00a0as you scroll up and down the page\u2014this is the\u00a0<b>parallax effect<\/b>\u00a0in action.<\/p>\n<p>To improve readability, a\u00a0<b>dark blue overlay<\/b>\u00a0was applied to the image in Photoshop, ensuring that the overlaid text remains\u00a0<b>\u00a0legible<\/b>.<\/p>\n<\/div>\n<div class=\"col-lg-5 col-md-5 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imageBorder wp-image-10339 aligncenter\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-with-patient-01-300x200.jpg\" alt=\"Doctor with patient\" width=\"400\" height=\"267\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-with-patient-01-300x200.jpg 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-with-patient-01-768x512.jpg 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-with-patient-01-600x400.jpg 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-with-patient-01.jpg 900w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<\/div>\n<\/div>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#13294b; background-image: url(https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/banner-demo-5.jpg);\" data-speed=\"18\" id=\"parallax-section\" data-type=\"background\" class=\"full-width-contained whitebackground \">\n<h1><span style=\"color: #ffffff;\">Leading<\/span><\/h1>\n<p><span style=\"color: #ffffff;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/p>\n<h1><span style=\"color: #ffffff;\">Teaching<\/span><\/h1>\n<p><span style=\"color: #ffffff;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/p>\n<h1><span style=\"color: #ffffff;\">Caring<\/span><\/h1>\n<p><span style=\"color: #ffffff;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>The example below uses a subtle, abstract background image.<\/p>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#e9f4f7; background-image: url(https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/abstract-bg-1.jpg);\" data-speed=\"18\" id=\"parallax-section\" data-type=\"background\" class=\"full-width-contained whitebackground \">\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h1>Leading, Teaching, Caring<\/h1>\n<p>This is a full-width section with subtle abstract background image. The <a style=\"color: #1c6fa6;\" href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/columns\/\">columns shortcode<\/a> was nested inside the full-width shortcode to obtain the 2-column layout for the overlaid content.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><span class=\"imgBorderDark\"><img loading=\"lazy\" decoding=\"async\" class=\"imageBorder alignnone wp-image-10300\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-patient-01-300x250.jpg\" alt=\"doctor with patient\" width=\"500\" height=\"416\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-patient-01-300x250.jpg 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-patient-01-768x639.jpg 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-patient-01-600x499.jpg 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/doctor-patient-01.jpg 779w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Background Video Section<\/h2>\n<p>The<strong> Background Video Section<\/strong> displays a full-width video background behind overlaid content.<\/p>\n<p>The initial shortcode will look like this:<\/p>\n<p><code>[heels_full_video poster=\"your image placeholder url\" mp4=\"your mp4 url\" class=\"\" height=\"520px\" align=\"center\" bottom=\"0%\"]Content[\/heels_full_video]<\/code><\/p>\n<h3>Define the Background Video<\/h3>\n<p>The video has to be uploaded to your sites <strong>Media<\/strong> folder (Max file size: <strong>64MB<\/strong>). It cannot reside on YouTube or another video hosting service.<\/p>\n<p>In the shortcode where it says <strong>mp4=&#8221;your mp4 url&#8221;<\/strong>, replace <strong>your mp4 url<\/strong> with the url of the video. Don&#8217;t delete the quotes, just replace the url within the quotes.<\/p>\n<h3>Define the Poster Image<\/h3>\n<p>The poster image is a background image that will display in the event the video doesn\u2019t load.<\/p>\n<p>In the shortcode where it says <strong>poster=&#8221;your image placeholder url&#8221;<\/strong>, replace <strong>your image placeholder url<\/strong> with the url of the image. Don&#8217;t delete the quotes, just replace the url within the quotes.<\/p>\n<h3>Add Your Content<\/h3>\n<p>Replace the <strong>Content<\/strong>\u00a0place-holder text with your own content. Whatever content you add (text, images, links, headers, etc.), will display on top of the background video. If the content is hard to read, you may wish to place it in a <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/notification-boxes\/\">notification box<\/a>. This will help the content stand out from the background video.<\/p>\n<h3>Custom Video Settings<\/h3>\n<ul>\n<li><strong>Height<\/strong> (height=&#8221;520px&#8221;) \u2013 Adjusts the section height.<\/li>\n<li><strong>Alignment<\/strong> (align=&#8221;center&#8221;) \u2013 Aligns overlaid text (<strong>left<\/strong>, <strong>center<\/strong>, or <strong>right<\/strong>).<\/li>\n<li><strong>Bottom Padding<\/strong> (bottom=&#8221;40%&#8221;) \u2013 Pushes the overlaying content up from the bottom edge of the video.<\/li>\n<\/ul>\n<h3>Example<\/h3>\n<p>In the example below, the overlaid text was placed inside a <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/notification-boxes\/\">notification box<\/a> to ensure it was legible. The height setting for this video was changed to 550px and the bottom setting changed to 0%.<\/p>\n\n\n\t<div class=\"header-unit \" style=\"height: 550px;\">\n\t\t<div id=\"video-container\">\n\t\t\t<video id=\"heel-fullvid\" style=\"background: url(https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/09\/07SmithiesReceivesNobelPrize-650x435-1.jpg) no-repeat;\" autoplay loop muted class=\"fillWidth\">\n\t\t\t\t<source src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/07\/Dr_15.mp4\" type=\"video\/mp4\" \/>Your browser does not support the video tag. I suggest you upgrade your browser.<\/video>\n\t\t<\/div>\n\n\t\t<div class=\"wdn-promo-container\" style=\"text-align: center;\">\n\t\t\t<div class=\"wdn-promo-content\" style=\"bottom: 0%;\">\n\t\t\t\t<div>\n<div class = \"alert alert-info  oscitas-bootstrap-container\">\n<p>Oliver Smithies, the School of Medicine&#8217;s Weatherspoon Eminent Distinguished Professor of Pathology and Laboratory Medicine, received the <strong>Nobel Prize in physiology or medicine<\/strong> in 2007.<\/p>\n<\/div>\n<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Styling Internal Content<\/h2>\n<p>The following css styles may be useful to style content placed within a full-width section. Remember to ensure that contrast between text and its background color meets the <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">minimum color contrast standards<\/a>.<\/p>\n<h3>Text Color Options<\/h3>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n\n<div class=\"\ttext-blue\t\">\n\t \n<h4>Blue Text<\/h4>\n<p>Use the <strong>.text-blue<\/strong> class to color the text.<\/p>\n<p>This is just some sample text for demonstration purposes.<\/p>\n\n<\/div>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#08446D;\" class=\"full-width-contained whitebackground text-white\">\n<h4>White Text<\/h4>\n<p>Use the <strong>.text-white<\/strong> class to color the text.<\/p>\n<p>This is just some sample text for demonstration purposes.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n\n<div class=\"\ttext-dark-blue\t\">\n\t \n<h4>Dark Blue Text<\/h4>\n<p>Use the <strong>.text-dark-blue<\/strong> class to color the text.<\/p>\n<p>This is just some sample text for demonstration purposes.<\/p>\n\n<\/div>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#08446D;\" class=\"full-width-contained whitebackground text-light-blue\">\n<h4>Light Blue Text<\/h4>\n<p>Use the <strong>.text-light-blue<\/strong> class to color the text.<\/p>\n<p>This is just some sample text for demonstration purposes.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3>No Margin-Top Options<\/h3>\n<p>Headers are styled with some margin (spacing) on the top. Sometimes this margin-top is undesirable if a header is the first element in a full-width section. To remove it, the class <strong>no-margin-top<\/strong> can be applied to the header.<\/p>\n<h3>Example<\/h3>\n<p>In the example below, the class <strong>text-white<\/strong> was applied to the full-width section to color the text white. The class <strong>no-margin-top<\/strong> was applied but only to the <strong>first<\/strong> header. It wasn&#8217;t applied to the second header because we don&#8217;t want to remove the spacing between it and the paragraph of text above it.<\/p>\n<script>\n\n    (function($) {\n        $(\"body, html\").addClass(\"heels_full_width_overflow\");\n    })(jQuery);\n\n   <\/script>\n   <div style=\"background-color:#08446D;\" class=\"full-width-contained whitebackground text-white\">\n<h2 class=\"no-margin-top\" style=\"text-align: center;\">This Is The Header<\/h2>\n<p style=\"text-align: center;\">This is just some sample text for demonstration purposes. This is just some sample text for demonstration purposes. This is just some sample text for demonstration purposes. This is just some sample text for demonstration purposes.<\/p>\n<h2 class=\"no-margin-top\" style=\"text-align: center;\">This Is The Second Header<\/h2>\n<p style=\"text-align: center;\">This is just some sample text for demonstration purposes. This is just some sample text for demonstration purposes.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Full-Width Sections let you place content over customizable background colors, images, or videos. They span either the full width of the browser window or the main content area, depending on page structure. These sections require knowledge of HTML, CSS, and digital accessibility best practices. Remember to ensure that contrast between text and its background meets &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\" aria-label=\"Read more about Full-Width Sections\">Read more<\/a><\/p>\n","protected":false},"author":89184,"featured_media":0,"parent":2212,"menu_order":18,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9684","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Full-Width Sections - Web Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full-Width Sections - Web Guide\" \/>\n<meta property=\"og:description\" content=\"Full-Width Sections let you place content over customizable background colors, images, or videos. They span either the full width of the browser window or the main content area, depending on page structure. These sections require knowledge of HTML, CSS, and digital accessibility best practices. Remember to ensure that contrast between text and its background meets &hellip; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-18T14:39:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\",\"name\":\"Full-Width Sections - Web Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png\",\"datePublished\":\"2020-12-16T18:22:53+00:00\",\"dateModified\":\"2025-11-18T14:39:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#primaryimage\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png\",\"width\":1600,\"height\":612},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Guide\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/ughome\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Styling Content\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Full-Width Sections\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/\",\"name\":\"Web Guide\",\"description\":\"School of Medicine IT\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Full-Width Sections - Web Guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/","og_locale":"en_US","og_type":"article","og_title":"Full-Width Sections - Web Guide","og_description":"Full-Width Sections let you place content over customizable background colors, images, or videos. They span either the full width of the browser window or the main content area, depending on page structure. These sections require knowledge of HTML, CSS, and digital accessibility best practices. Remember to ensure that contrast between text and its background meets &hellip; Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/","og_site_name":"Web Guide","article_modified_time":"2025-11-18T14:39:31+00:00","og_image":[{"url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/","url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/","name":"Full-Width Sections - Web Guide","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#primaryimage"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#primaryimage"},"thumbnailUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png","datePublished":"2020-12-16T18:22:53+00:00","dateModified":"2025-11-18T14:39:31+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#primaryimage","url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-87.png","width":1600,"height":612},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/"},{"@type":"ListItem","position":2,"name":"User Guide","item":"https:\/\/www.med.unc.edu\/webguide\/userguide\/ughome\/"},{"@type":"ListItem","position":3,"name":"Styling Content","item":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/"},{"@type":"ListItem","position":4,"name":"Full-Width Sections"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/","name":"Web Guide","description":"School of Medicine IT","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9684","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\/89184"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=9684"}],"version-history":[{"count":8,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9684\/revisions"}],"predecessor-version":[{"id":14198,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9684\/revisions\/14198"}],"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=9684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}