{"id":262,"date":"2022-12-13T15:32:35","date_gmt":"2022-12-13T23:32:35","guid":{"rendered":"https:\/\/depts.washington.edu\/uwhivishub\/?page_id=262"},"modified":"2023-01-19T16:18:10","modified_gmt":"2023-01-20T00:18:10","slug":"jumbotrons","status":"publish","type":"page","link":"https:\/\/depts.washington.edu\/uwhivishub\/theme-features\/jumbotrons\/","title":{"rendered":"Jumbotrons"},"content":{"rendered":"<p>Only the <em>default<\/em> style adjust to the content-width. All other jumbotron styles can only be used as full-width. Read more about jumbotrons on the <a href=\"https:\/\/www.washington.edu\/docs\/shortcode-cookbook\/jumbotrons\/\" target=\"_blank\" rel=\"noopener\">UW Cookbook website<\/a>.<\/p>\n<p><em>Style: none\/default<\/em><\/p>\n<div class=\"accordion \" id=\"jumbotrons\">\n<div class=\"screen-reader-text\">Jumbotrons<\/div>\n<div class=\"card\">\n<div class=\"card-header\" id=\"accordion-header\">\n<h3 class=\"mb-0\"><button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse\" aria-expanded=\"false\" aria-controls=\"collapse\"><span class=\"btn-text\">default style overlays<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/button><\/h3>\n<\/div>\n<div id=\"collapse\" class=\"collapse \" aria-labelledby=\"collapse\" data-parent=\"#accordion\" role=\"region\">\n<p><em>Overlay: none\/default<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background default  \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Overlay: purple<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background default purple-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow secondary\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Overlay: gold<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background default gold-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow white\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Overlay: gray<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background default gray-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Overlay: white<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background default white-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><em>Style: simple. Overlay: none<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-simple full-width  \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Style: simple. Overlay: purple<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-simple full-width purple-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow secondary\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Style: simple. Overlay: gold<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-simple full-width gold-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow white\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Style: simple. Overlay: gray<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-simple full-width gray-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Style: simple. Overlay: white<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-simple full-width white-overlay \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-60 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<hr>\n<p><em>Style: block. Align: none\/default\/left<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-block full-width  \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-40 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<div><svg class=\"slant-pattern\"><pattern id=\"pattern-stripe-1701899115\" width=\"14\" height=\"10\" patternunits=\"userSpaceOnUse\" patterntransform=\"rotate(15)\"><rect width=\"1\" height=\"10\" transform=\"translate(0,0)\" fill=\"white\"><\/rect><\/pattern><mask id=\"mask-stripe\"><rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-stripe-1701899115)\" \/><\/mask><rect class=\"hbar white-lines\" x=\"0\" y=\"0\" width=\"100%\" height=\"100\"><\/rect><\/svg><\/div>\n<\/p>\n<\/div>\n<\/div>\n<p><em>Style: block. Align: right<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-block full-width  d-flex justify-content-end\"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"w-40 \">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg arrow primary purple\"><span>Button text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<div><svg class=\"slant-pattern\"><pattern id=\"pattern-stripe-141652363\" width=\"14\" height=\"10\" patternunits=\"userSpaceOnUse\" patterntransform=\"rotate(15)\"><rect width=\"1\" height=\"10\" transform=\"translate(0,0)\" fill=\"white\"><\/rect><\/pattern><mask id=\"mask-stripe\"><rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-stripe-141652363)\" \/><\/mask><rect class=\"hbar white-lines\" x=\"0\" y=\"0\" width=\"100%\" height=\"100\"><\/rect><\/svg><\/div>\n<\/p>\n<\/div>\n<\/div>\n<hr>\n<p><em>Style: block-center<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background jumbo-block-center full-width  \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"d-flex-column w-40 \">\n<div class=\"container\">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<\/div>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-sm primary\"><span>Button text<\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<hr>\n<p><em>Style: block-slant. Align: none\/default\/left<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background overlay jumbo-block-slant full-width  \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"transparent-overlay-slant \">\n<div class=\"inner-overlay\">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg secondary\"><span>Button text<\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><em>Style: block-center. Align: right<\/em><\/p>\n<div  class=\"jumbotron jumbotron-fluid img-background overlay jumbo-block-slant full-width  \"  style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg);\" ><img decoding=\"async\" class=\"mobile-img\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/11\/cropped-20200810_HRC-exterior_0360_hero.jpg\"><\/p>\n<div class=\"transparent-overlay-slant overlay-right\">\n<div class=\"inner-overlay\">\n<h2 class=\"display-3\">Jumbotron title<\/h2>\n<p><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<\/p>\n<\/p>\n<p class=\"button\"><a href=\"https:\/\/www.washington.edu\/populationhealth\/hans-rosling-center\/\" class=\"btn btn-lg secondary\"><span>Button text<\/span><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr>\n<p><em>Shortcode<\/em><\/p>\n<pre><code>\r\n[uw_jumbotron style=\"\" title=\"Jumbotron title\" overlay=\"\" align=\"\" image=\"#\" button=\"Button text\" link=\"#\"]This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.[\/uw_jumbotron]\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Only the default style adjust to the content-width. All other jumbotron styles can only be used as full-width. Read more about jumbotrons on the UW Cookbook website. Style: none\/default Style: simple. Overlay: none Style: simple. Overlay: purple Style: simple. Overlay: gold Style: simple. Overlay: gray Style: simple. Overlay: white Style: block. Align: none\/default\/left Style: block. Align: right Style: block-center Style: block-slant. Align: none\/default\/left Style: block-center. Align: right Shortcode Jumbotron title This is a simple hero unit, a simple jumbotron-style component&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":80,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":14,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/262\/revisions\/276"}],"up":[{"embeddable":true,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/80"}],"wp:attachment":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/media?parent=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}