Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save melchoyce/60bc6f012260cbd01f8dc87138bdc665 to your computer and use it in GitHub Desktop.
Save melchoyce/60bc6f012260cbd01f8dc87138bdc665 to your computer and use it in GitHub Desktop.
WordPress Pattern: Big image with headline and columns above.
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:heading {"style":{"typography":{"fontSize":"48px","lineHeight":"1"}}} -->
<h2 style="font-size:48px;line-height:1"><strong>PETAL &amp;</strong><br><strong>STAMEN</strong></h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph -->
<p>Petal &amp; Stamen is a new nature magazine from the same folks who brought you Antler &amp; Horn. Each magazine contains over a dozen photography essays.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:paragraph -->
<p><a href="mailto:info@example.com">info@example.com</a><br>(123) 456-7890</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="http://facebook.com">Facebook</a> / <a href="http://instagram.com">Instagram</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:separator {"color":"primary","align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-text-color has-background has-primary-background-color has-primary-color is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:image {"align":"wide","id":3004,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignwide size-large"><img src="https://mywptesting.site/wp-content/uploads/2021/06/49010049936_8eeb441578_k-1024x683.jpg" alt="Closeup of a Collinsonia Canadensis (Stoneroot / Richweed) plant on a dark background. The stamens reach up and out as if the plant is spreading its arms." class="wp-image-3004"/></figure>
<!-- /wp:image -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment