Hero Pattern: The Twelve Blocks of Christmas

This is the third post in a twelve-part series of WordPress block features we’re ending with in 2022. The Twelve Blocks of Christmas allows visitors of B+P to copy the code of each pattern below into their own WordPress site.

I don’t know if it’s the purposeful disappearance of color from the design world or just that I love contrast, but I’m appreciating sites that have a stronger POV on hero sections. I like the idea that patterns can be a forcing function for taking chances with color.

In that vein, this is a block pattern for a full-width hero. It’s a bit broken in mobile. I’m attempting to use only WordPress core blocks to build the pattern.

The Title of the Hero Pattern

This is a description of the article and can even be an excerpt. This is purposely small and bolded to minimize its presence on the page but highlight the importance of the text. This is nested in a group set to 600 px.

wpblocksandpatterns

December 22, 2022

This paragraph and the ones that follow are lorem ipsum. I’m purposely including a drop cap highlighted in the secondary accent color I’ve chosen which is green. For no other reason than I’d like to see how the color looks. (The light green looks fine on the cover above but not my favorite on the lighter background.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Get the Code

<!-- wp:cover {"url":"https://blocksandpatterns.com/wp-content/uploads/2022/12/pencils.jpeg","id":193,"hasParallax":true,"dimRatio":30,"minHeight":60,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"color":{}}} -->
<div class="wp-block-cover alignfull is-light has-parallax" style="min-height:60vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-193 has-parallax" style="background-position:50% 50%;background-image:url(https://blocksandpatterns.com/wp-content/uploads/2022/12/pencils.jpeg)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"overlayColor":"textonbutton","minHeight":360,"minHeightUnit":"px","align":"full","className":"is-style-abs-overlap-above"} -->
<div class="wp-block-cover alignfull is-style-abs-overlap-above" style="min-height:360px"><span aria-hidden="true" class="wp-block-cover__background has-textonbutton-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"max-gigantic"} -->
<p class="has-text-align-center has-max-gigantic-font-size">The Title of the Hero Pattern</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"style":{"color":{"background":"#868790"}},"className":"is-style-default","twWidth":"40%","twHeight":"2px"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default" style="background-color:#868790;color:#868790"/>
<!-- /wp:separator -->

<!-- wp:group {"layout":{"type":"constrained","contentSize":"600px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","fontSize":"xsmall"} -->
<p class="has-text-align-center has-xsmall-font-size"><strong>This is a description of the article and can even be an excerpt. This is purposely small and bolded to minimize its presence on the page but highlight the importance of the text.  This is nested in a group set to 600 px.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"xsmall"} -->
<div class="wp-block-group has-xsmall-font-size"><!-- wp:paragraph -->
<p>by</p>
<!-- /wp:paragraph -->

<!-- wp:post-author-name {"textColor":"accenttwo"} /--></div>
<!-- /wp:group -->

<!-- wp:post-date {"textAlign":"center","style":{"color":{"text":"#6c6f70"}},"fontSize":"xxs"} /--></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

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

<!-- wp:paragraph {"dropCap":true} -->
<p class="has-drop-cap"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accenttwo-color">T</mark>his paragraph and the ones that follow are lorem ipsum. I'm purposely including a drop cap highlighted in the secondary accent color I've chosen which is green. For no other reason than I'd like to see how the color looks. (The light green looks fine on the cover above but not my favorite on the lighter background.)<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph -->