Payment Block 3 rows

[onuro]

Preview →

3 rows layout, wrapped within a full width zero gap group block.

@ianstewart @olaolusoga @alaczek @iamtakashi

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignfull" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"layout":{"contentSize":"660px"}} -->
<div class="wp-block-group" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"120px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"40px"}}}} -->
<h2 class="has-text-align-center" id="wing-it" style="font-size:120px;font-style:normal;font-weight:700;margin-bottom:40px">Wing It</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"17px"}}} -->
<p class="has-text-align-center" style="font-size:17px">For ah-come-on kind of cold weather. The ReNew Long Parka has a long, relaxed fit, oversized cargo pockets, fleecy handwarmer pockets, and a roomy hood.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/recurring-payments -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-id","text":"Buy Now","customTextColor":"#fefefe","customBackgroundColor":"#0a0a0a","borderRadius":0,"width":"100%"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group -->

<!-- wp:gallery {"ids":[4605,4604,4603],"linkTo":"none","align":"full"} -->
<figure class="wp-block-gallery alignfull has-nested-images columns-default is-cropped"><!-- wp:image {"id":4605,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/03/img1.jpg" alt="" class="wp-image-4605"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":4604,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/03/img2.jpg" alt="" class="wp-image-4604"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":4603,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/03/img3.jpg" alt="" class="wp-image-4603"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

<!-- wp:group {"layout":{"contentSize":"1000px"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"style":{"typography":{"fontSize":"20px","fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"20px"}}}} -->
<h2 id="fits-your-wardrobe" style="font-size:20px;font-style:normal;font-weight:600;margin-bottom:20px">Fits your wardrobe</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px">For ah-come-on kind of cold weather. The ReNew Long Parka has a long, relaxed fit, oversized cargo pockets, fleecy hand-warmer pockets, and a roomy hood. Plus, it’s made entirely* from our technical, 100% recycled fabric.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"style":{"typography":{"fontSize":"20px","fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"20px"}}}} -->
<h2 id="fits-your-wardrobe" style="font-size:20px;font-style:normal;font-weight:600;margin-bottom:20px">Versatile</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px">For ah-come-on kind of cold weather. The ReNew Long Parka has a long, relaxed fit, oversized cargo pockets, fleecy hand-warmer pockets, and a roomy hood. Plus, it’s made entirely* from our technical, 100% recycled fabric.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}}} -->
<div class="wp-block-column" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:heading {"style":{"typography":{"fontSize":"20px","fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"20px"}}}} -->
<h2 id="fits-your-wardrobe" style="font-size:20px;font-style:normal;font-weight:600;margin-bottom:20px">Normal fit</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px">For ah-come-on kind of cold weather. The ReNew Long Parka has a long, relaxed fit, oversized cargo pockets, fleecy hand-warmer pockets, and a roomy hood. Plus, it’s made entirely* from our technical, 100% recycled fabric.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

[alaczek]

This one needs work on the text and images because right now it doesn't feel real. Once the images are swapped, the text needs to be aligned with the subject.

[iamtakashi]

I see a horizontal scrollbar when I preview it. I think you don't need to get rid of the padding from the most-outer Group block in the pattern.

The rhythm of vertical spacing seems a bit off. I don't think all the vertical gaps don't have to be the same, (and it's probably impossible to make them the same with the current tool) but it should make sense with the flow of the contents. (1) seems to be too little. (2) seems to be too generous.

I wonder if it looks good if the width of the button is a little narrower.

I think the size of paragraphs (3) is a bit too large for the layout.

[iamtakashi]

I just saw some of those images in Unsplash, and I've noticed those are sponsored images from Microsoft. Let's stay away from any sponsored images in Unsplash.

[onuro]

Updated with cc0 imagery, content and spacing fixes:

[iamtakashi]

Sorry, this fell in the cracks.

I assume it's been a tough task to find three images for a product that we feel ok to use in a pattern. They aren't very inspiring at the moment. The images on the left and the right are flat and are taken with very similar perspectives. I don't dislike the middle. Could you do another go to find something that work better with this concept?

What do you think about the wide button? It's too wide for a not obvious reason to me. I remember this was initially designed by someone else, but feel free to improve as you go.

[onuro]

Never thought I'd play with the design itself and thanks for bringing that up! 😄 I'll def give the button tweak a go.

And yes, the images were though to come by as a group but you're right I'll give it another try.