Jumbotron

[schutzsmith]

A combination of a call to action and a three column layout, most widely known in design patterns as a "jumbotron".

Pattern Title

Jumbotron

Pattern Categories

Columns, Header, Text

Screenshots

Block Markup

https://gist.github.com/schutzsmith/5d8c1e7509a2683b617e7f3f96498174

[kjellr]

Hi @schutzsmith! I like the pattern, but can we switch out the text so that it's less obviously placeholder? For this set of patterns in the directory, we've been trying to make them seem a bit more "lifelike" by avoiding lorem ipsum and other placeholder text. This way, when users see the preview, they see it as if it were a real section on a website. We've been tending to look to art, history, and nature as themes for the text.

@melchoyce or I can help take a pass at the copy too if that's helpful.

[schutzsmith]

@kjellr Will update all my submissions today. Thanks!

[schutzsmith]

@kjellr Updated with text from Wikipedia.

[kjellr]

Thank you for the update! Is this text directly from Wikipedia? If so, I believe it would need attribution and isn't totally in the public domain or CC0. In general, we've been writing new copy ourselves, or pulling from something like public domain books.

Thanks!

[melchoyce]

Got help from @courtneydawn rephrasing the copy, so we don't need to worry about licensing:

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"4em","right":"4em","bottom":"4em","left":"4em"}}},"backgroundColor":"black","textColor":"white"} -->
<div class="wp-block-group alignwide has-white-color has-black-background-color has-text-color has-background" style="padding-top:4em;padding-right:4em;padding-bottom:4em;padding-left:4em"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"textAlign":"left","textColor":"green"} -->
<h2 class="has-text-align-left has-green-color has-text-color"><strong>Native American Art</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This exhibition showcases a variety of art from the indigenous peoples of the Americas, with items ranging from ancient times to the present.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"contentJustification":"left"} -->
<div class="wp-block-buttons is-content-justification-left"><!-- wp:button {"backgroundColor":"green","textColor":"black"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-green-background-color has-text-color has-background">Learn more →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3><strong>Arctic</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Yup’ik live on the southeastern coast of Alaska. They are known for designing and creating beautiful carved masks that they use in shamanic rituals and dance ceremonies. These indigenous arctic people have used masks for thousands of years in their dances and performances.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"green","width":100,"style":{"border":{"radius":0}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link has-green-color has-black-background-color has-text-color has-background no-border-radius">View details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3><strong>Subarctic</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Cultures of interior Alaska and Canada living south of the Arctic Circle are often referred to as Subarctic Indigenous Peoples and refers to a number of unique groups. They are known for their intricate beadwork on clothing. The oldest known petroglyph art inn the area scan be dated to 5000 BCE.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"green","width":100,"style":{"border":{"radius":0}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link has-green-color has-black-background-color has-text-color has-background no-border-radius">View details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3><strong>Northwest Coast</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Haida, the Tlingit, the Tsimshian, the Nuu-chah-nulth (Nootka), and the Salishan live in the coastal Northwest of the US and Canada.  The Haida are known for using a dense shale called Argillite for carving intricate representations of the natural and spiritual world.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"green","width":100,"style":{"border":{"radius":0}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link has-green-color has-black-background-color has-text-color has-background no-border-radius">View details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

[kjellr]

Awesome. Looks good! When we add this to the directory, I suggest we change the light green text in the top area to white, since that will fit more nicely with themes other than Twenty Twenty-One. 👍

[kjellr]

I was looking at this a little more, and what would you folks think of adding a little color and perhaps an image to this pattern? I think it could really help make this fit in with the other patterns in the pre-release collection a little better. Here's a quick pass:

I also trimmed the copy in the three columns just a little bit while I was in there.

<!-- wp:media-text {"mediaPosition":"right","mediaId":3410,"mediaLink":"https://patterns-demo.mystagingwebsite.com/wp-content/uploads/2021/06/TR.165.32.2011_b-scaled.jpg","mediaType":"image","mediaWidth":33.33,"verticalAlignment":"center","imageFill":true,"style":{"color":{"text":"#ffffff","background":"#222222"},"elements":{"link":{"color":{"text":"#ffffff"}}}}} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-center is-image-fill has-text-color has-background has-link-color" style="background-color:#222222;color:#ffffff;grid-template-columns:auto 33.33%"><figure class="wp-block-media-text__media" style="background-image:url(https://patterns-demo.mystagingwebsite.com/wp-content/uploads/2021/06/TR.165.32.2011_b-scaled.jpg);background-position:50% 50%"><img src="https://patterns-demo.mystagingwebsite.com/wp-content/uploads/2021/06/TR.165.32.2011_b-scaled.jpg" alt="" class="wp-image-3410 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"475px","style":{"spacing":{"padding":{"top":"0em","right":"0em","bottom":"0em","left":"0em"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0em;padding-right:0em;padding-bottom:0em;padding-left:0em;flex-basis:475px"><!-- wp:heading {"textAlign":"left"} -->
<h2 class="has-text-align-left"><strong>Native American Art</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This exhibition showcases a variety of art from the indigenous peoples of the Americas, with items ranging from ancient times to the present.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"contentJustification":"left"} -->
<div class="wp-block-buttons is-content-justification-left"><!-- wp:button {"style":{"color":{"text":"#d83630","background":"#ffffff"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="background-color:#ffffff;color:#d83630">Learn more →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:media-text -->

<!-- wp:spacer {"height":30} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3><strong>Arctic</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Yup’ik live on the southeastern coast of Alaska. They are known for designing and creating beautiful carved masks. </p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"color":{"background":"#d83630","text":"#ffffff"},"border":{"radius":"0px"}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:0pxpx;background-color:#d83630;color:#ffffff">View details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3><strong>Subarctic</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Cultures of interior Alaska and Canada living south of the Arctic Circle are often referred to as Subarctic Indigenous Peoples.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"color":{"background":"#d83630","text":"#ffffff"},"border":{"radius":"0px"}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:0pxpx;background-color:#d83630;color:#ffffff">View details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3><strong>Northwest Coast</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Haida are known for using a shale called Argillite for carving intricate representations of the natural and spiritual world.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"style":{"color":{"background":"#d83630","text":"#ffffff"},"border":{"radius":"0px"}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:0pxpx;background-color:#d83630;color:#ffffff">View details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Image: https://www.metmuseum.org/art/collection/search/319099

[melchoyce]

Looks great!

[kjellr]

Added here:

https://wordpress.org/patterns/pattern/call-to-action-with-columns-of-text/

(The buttons in particular look really bad in the preview, but that isn't an issue with the pattern itself)