Payment Button, Image, and Paragraphs

[iamtakashi]

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw"},"margin":{"top":"0px","bottom":"0px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:7vw;padding-bottom:7vw"><!-- wp:group {"align":"wide","style":{"border":{"radius":"28px"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"color":{"background":"#121313","text":"#f6f4ed"}}} -->
<div class="wp-block-group alignwide has-text-color has-background" style="border-radius:28px;color:#f6f4ed;background-color:#121313;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"8%","right":"8%","bottom":"8%","left":"8%"}}},"layout":{"inherit":false,"contentSize":"640px"}} -->
<div class="wp-block-column" style="padding-top:8%;padding-right:8%;padding-bottom:8%;padding-left:8%"><!-- wp:heading {"style":{"typography":{"textTransform":"uppercase","lineHeight":"1.1","letterSpacing":"0.3em","fontStyle":"normal","fontWeight":"500"}},"fontSize":"large"} -->
<h2 class="has-large-font-size" style="font-style:normal;font-weight:500;letter-spacing:0.3em;line-height:1.1;text-transform:uppercase">Yuga<br>Foundation</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.6">We started a foundation to act as the company’s charitable arm almost 20 years ago. Since then, we have created dozens of community spaces that improve the living conditions for those in need across more than 12 countries.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.6">Help us build a better world by supporting our foundation today.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:jetpack/recurring-payments {"planId":10,"url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=10","uniqueId":"recurring-payments-10"} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-10","passthroughAttributes":{"uniqueId":"uniqueId","url":"url"},"text":"$10.00","url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=10","customTextColor":"#002a32","customBackgroundColor":"#f6f4ed"} /--></div>
<!-- /wp:jetpack/recurring-payments -->

<!-- wp:jetpack/recurring-payments {"planId":11,"url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=11","uniqueId":"recurring-payments-11"} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-11","passthroughAttributes":{"uniqueId":"uniqueId","url":"url"},"text":"$20.00","url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=11","customTextColor":"#002a32","customBackgroundColor":"#f6f4ed"} /--></div>
<!-- /wp:jetpack/recurring-payments -->

<!-- wp:jetpack/recurring-payments {"planId":13,"url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=13","uniqueId":"recurring-payments-13"} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-13","passthroughAttributes":{"uniqueId":"uniqueId","url":"url"},"text":"Other","url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=13","customTextColor":"#002a32","customBackgroundColor":"#f6f4ed"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"36%"} -->
<div class="wp-block-column" style="flex-basis:36%"><!-- wp:image {"id":5718,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":null,"topRight":"28px","bottomLeft":null,"bottomRight":"28px"}}},"className":"has-custom-border"} -->
<figure class="wp-block-image size-full has-custom-border" style="border-top-right-radius:28px;border-bottom-right-radius:28px"><img src="https://dotcompatterns.files.wordpress.com/2022/07/thisisengineering-raeng-wabxzewjvlq-unsplash-1.jpg" alt="" class="wp-image-5718"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

https://dotcompatterns.wordpress.com/?p=5716&preview=true

[onuro]

The heading line-height seems to be not in line(looked a bit shrunk to me) w the followed paragraphs. Otherwise looks cool. @alaczek wdyt?

[alaczek]

Yeah, maybe you could tweak it slightly.

[onuro]

Updated:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"7vw","bottom":"7vw"},"margin":{"top":"0px","bottom":"0px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:7vw;padding-bottom:7vw"><!-- wp:group {"align":"wide","style":{"border":{"radius":"28px"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"color":{"background":"#121313","text":"#f6f4ed"}}} -->
<div class="wp-block-group alignwide has-text-color has-background" style="border-radius:28px;color:#f6f4ed;background-color:#121313;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"8%","right":"8%","bottom":"8%","left":"8%"}}},"layout":{"inherit":false,"contentSize":"640px"}} -->
<div class="wp-block-column" style="padding-top:8%;padding-right:8%;padding-bottom:8%;padding-left:8%"><!-- wp:heading {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.3em","fontStyle":"normal","fontWeight":"500","lineHeight":"1.5"}},"fontSize":"large"} -->
<h2 class="has-large-font-size" style="font-style:normal;font-weight:500;letter-spacing:0.3em;line-height:1.5;text-transform:uppercase">Yuga<br>Foundation</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.6">We started a foundation to act as the company’s charitable arm almost 20 years ago. Since then, we have created dozens of community spaces that improve the living conditions for those in need across more than 12 countries.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.6"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="line-height:1.6">Help us build a better world by supporting our foundation today.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:jetpack/recurring-payments {"planId":10,"url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=10","uniqueId":"recurring-payments-10"} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-10","passthroughAttributes":{"uniqueId":"uniqueId","url":"url"},"text":"$10.00","url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=10","customTextColor":"#002a32","customBackgroundColor":"#f6f4ed"} /--></div>
<!-- /wp:jetpack/recurring-payments -->

<!-- wp:jetpack/recurring-payments {"planId":11,"url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=11","uniqueId":"recurring-payments-11"} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-11","passthroughAttributes":{"uniqueId":"uniqueId","url":"url"},"text":"$20.00","url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=11","customTextColor":"#002a32","customBackgroundColor":"#f6f4ed"} /--></div>
<!-- /wp:jetpack/recurring-payments -->

<!-- wp:jetpack/recurring-payments {"planId":13,"url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=13","uniqueId":"recurring-payments-13"} -->
<div class="wp-block-jetpack-recurring-payments"><!-- wp:jetpack/button {"element":"a","uniqueId":"recurring-payments-13","passthroughAttributes":{"uniqueId":"uniqueId","url":"url"},"text":"Other","url":"https://dotcompatterns.wordpress.com/?p=5716\u0026recurring_payments=13","customTextColor":"#002a32","customBackgroundColor":"#f6f4ed"} /--></div>
<!-- /wp:jetpack/recurring-payments --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"36%"} -->
<div class="wp-block-column" style="flex-basis:36%"><!-- wp:image {"id":5718,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":null,"topRight":"28px","bottomLeft":null,"bottomRight":"28px"}}},"className":"has-custom-border"} -->
<figure class="wp-block-image size-full has-custom-border" style="border-top-right-radius:28px;border-bottom-right-radius:28px"><img src="https://dotcompatterns.files.wordpress.com/2022/07/thisisengineering-raeng-wabxzewjvlq-unsplash-1.jpg" alt="" class="wp-image-5718"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

[alaczek]

Published!