{"id":10276,"date":"2020-12-16T13:24:06","date_gmt":"2020-12-16T18:24:06","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=10276"},"modified":"2025-04-23T11:20:16","modified_gmt":"2025-04-23T15:20:16","slug":"examples","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/","title":{"rendered":"More Examples"},"content":{"rendered":"<p>This page demonstrates what the full-width sections on the <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\">documentation page<\/a>\u00a0look like on pages with no sidebars. This technique is often used on home pages.<\/p>\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:#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<p>&nbsp;<\/p>\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:#08446D;\" class=\"full-width-contained whitebackground \">\n<p style=\"text-align: center; font-size: 2.825rem;\"><span style=\"color: #ffffff;\">Full-Width Section with Background Color<\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"color: #ffffff;\">The School of Medicine (SOM) blue (#13294B) has been set as the background color. The overlaid text has been centered and styled white (#ffffff).<\/span><\/p>\n<\/div>\n<p>&nbsp;<\/p>\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<p>&nbsp;<\/p>\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:#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>&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:#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<p>&nbsp;<\/p>\n<p>&nbsp;<\/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<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page demonstrates what the full-width sections on the documentation page\u00a0look like on pages with no sidebars. This technique is often used on home pages. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":9684,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-10276","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>More Examples - 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\/examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"More Examples - Web Guide\" \/>\n<meta property=\"og:description\" content=\"This page demonstrates what the full-width sections on the documentation page\u00a0look like on pages with no sidebars. This technique is often used on home pages. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-23T15:20:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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\/examples\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/\",\"name\":\"More Examples - 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\/examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg\",\"datePublished\":\"2020-12-16T18:24:06+00:00\",\"dateModified\":\"2025-04-23T15:20:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#primaryimage\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#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\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"More Examples\"}]},{\"@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\",\"publisher\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#organization\"},\"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\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#organization\",\"name\":\"UNC School of Medicine\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png\",\"width\":612,\"height\":150,\"caption\":\"UNC School of Medicine\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"More Examples - 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\/examples\/","og_locale":"en_US","og_type":"article","og_title":"More Examples - Web Guide","og_description":"This page demonstrates what the full-width sections on the documentation page\u00a0look like on pages with no sidebars. This technique is often used on home pages. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;","og_url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/","og_site_name":"Web Guide","article_modified_time":"2025-04-23T15:20:16+00:00","og_image":[{"url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/","url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/","name":"More Examples - 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\/examples\/#primaryimage"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#primaryimage"},"thumbnailUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg","datePublished":"2020-12-16T18:24:06+00:00","dateModified":"2025-04-23T15:20:16+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#primaryimage","url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/12\/AdobeStock_103718357_2000px-e1607973394115-271x300.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/examples\/#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","item":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/full-width-sections\/"},{"@type":"ListItem","position":5,"name":"More Examples"}]},{"@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","publisher":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#organization"},"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"},{"@type":"Organization","@id":"https:\/\/www.med.unc.edu\/webguide\/#organization","name":"UNC School of Medicine","url":"https:\/\/www.med.unc.edu\/webguide\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/","url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2017\/06\/School_of_Medicine_CarolinaBlue_Navy_rgb_h.png","width":612,"height":150,"caption":"UNC School of Medicine"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#\/schema\/logo\/image\/"}}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10276","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=10276"}],"version-history":[{"count":1,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10276\/revisions"}],"predecessor-version":[{"id":14215,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10276\/revisions\/14215"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9684"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=10276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}