WordPress Block Pattern for Pricing Columns

pricing-columns.html

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"white","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-group is-style-twentytwentyone-border has-white-background-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","backgroundColor":"black","fontSize":"extra-large"} -->
<p class="has-text-align-center has-black-background-color has-background has-extra-large-font-size"><strong>Free</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"fontSize":"extra-small"} -->
<p class="has-text-align-center has-extra-small-font-size" style="line-height:1"><strong><em>Ideal for developers</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":72}}} -->
<p class="has-text-align-center" style="font-size:72px"><strong>$0</strong> <span class="has-inline-color has-blue-color">/ mo</span></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>10 users included</li><li>2 GB of storage</li><li>Email support</li><li>Help center access</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"contentJustification":"center","align":"full"} -->
<div class="wp-block-buttons alignfull is-content-justification-center"><!-- wp:button {"borderRadius":0,"backgroundColor":"black","textColor":"white","width":75,"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75 is-style-fill"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background no-border-radius">Sign up for free</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"white","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-group is-style-twentytwentyone-border has-white-background-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","backgroundColor":"black","fontSize":"extra-large"} -->
<p class="has-text-align-center has-black-background-color has-background has-extra-large-font-size"><strong>Pro</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"fontSize":"extra-small"} -->
<p class="has-text-align-center has-extra-small-font-size" style="line-height:1"><strong><em>Most popular</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":72}}} -->
<p class="has-text-align-center" style="font-size:72px"><strong>$</strong>15 <span class="has-inline-color has-blue-color">/ mo</span></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>20 users included</li><li>10 GB of storage</li><li>Priority email support</li><li>Help center access</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"contentJustification":"center","align":"full"} -->
<div class="wp-block-buttons alignfull is-content-justification-center"><!-- wp:button {"borderRadius":0,"backgroundColor":"red","textColor":"black","width":75,"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75 is-style-outline"><a class="wp-block-button__link has-black-color has-red-background-color has-text-color has-background no-border-radius">Get Started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"white","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-group is-style-twentytwentyone-border has-white-background-color has-background" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","backgroundColor":"black","fontSize":"extra-large"} -->
<p class="has-text-align-center has-black-background-color has-background has-extra-large-font-size"><strong>Enterprise</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"fontSize":"extra-small"} -->
<p class="has-text-align-center has-extra-small-font-size" style="line-height:1"><strong><em>For large organizations</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":72}}} -->
<p class="has-text-align-center" style="font-size:72px"><strong>$</strong>29 <span class="has-inline-color has-blue-color">/ mo</span></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>30 users included</li><li>15 GB of storage</li><li>Phone and email support</li><li>Help center access</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"contentJustification":"center","align":"full"} -->
<div class="wp-block-buttons alignfull is-content-justification-center"><!-- wp:button {"borderRadius":0,"backgroundColor":"black","textColor":"white","width":75,"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75 is-style-fill"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background no-border-radius">Contact us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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