Payment Block Cover 1

[onuro]

Preview →

Cover Block with left bottom vertical alignment.

@ianstewart @olaolusoga @alaczek @iamtakashi

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/03/man-sitting.jpg","id":4579,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","contentPosition":"bottom left","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-left" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-4579" alt="" src="https://dotcompatterns.files.wordpress.com/2022/03/man-sitting.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"60px","left":"40px"},"blockGap":"0px"},"color":{"text":"#fffffe"}},"layout":{"contentSize":"450px"}} -->
<div class="wp-block-group has-text-color" style="color:#fffffe;padding-top:40px;padding-right:40px;padding-bottom:60px;padding-left:40px"><!-- wp:heading {"style":{"typography":{"fontSize":"58px","fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"40px"}}}} -->
<h2 id="find-your-happy-place" style="font-size:58px;font-style:normal;font-weight:600;margin-bottom:40px">The Comfort Mat</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px","lineHeight":1.6},"color":{"text":"#cacaca"}}} -->
<p class="has-text-color" style="color:#cacaca;font-size:17px;line-height:1.6">Our mats are 72" long and 24" wide, ensuring a comfortable yoga for everyone of all shapes and sizes. Constructed using high quality NBR foam to enhance the performance for yogis of all levels.</p>
<!-- /wp:paragraph -->

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

<!-- wp:jetpack/recurring-payments {"shouldDisplayFrontendBanner":false} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-id","text":"\u003cstrong\u003eBuy Now\u003c/strong\u003e","customTextColor":"#1a1a1a","customBackgroundColor":"#fffffe","borderRadius":0,"width":"100%"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

[alaczek]

This one is looking pretty neat! The only thing is adjusting the text so that it's more clear this is a product and it's more connected to the image.

[iamtakashi]

Can we increase the size of the heading so that it avoids widow? Of course, it depends on the font and is impossible to avoid it always, but it won't hurt to make it slightly larger.

Can the button text be bold?

[onuro]

Updated w feedbacks applied:

[iamtakashi]

Just realised the image is Microsoft sponsored image. It's likely they used the image for their product campaign. In my opinion, as I mentioned in #196, we should stay away from those suponsoured images. @alaczek, any opinion?