The plat card: a free WordPress block pattern

How to use it

1. Copy the markup below.
2. In the block editor, open the options menu and switch to the Code editor.
3. Paste the markup where you want the section, then switch back to the Visual editor.
4. Swap in your own text and images. Colors come from your theme's palette.

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"className":"gw-plat-section","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull gw-plat-section" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"className":"gw-plat gw-plat-fallback","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat gw-plat-fallback"><!-- wp:group {"className":"gw-plat-map","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat-map"><!-- wp:paragraph {"className":"gw-plat-name"} -->
<p class="gw-plat-name">Your Business Name</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-plat-town"} -->
<p class="gw-plat-town">Springfield</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-plat-facts","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat-facts"><!-- wp:group {"className":"gw-plat-rows","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat-rows"><!-- wp:group {"className":"gw-plat-row","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat-row"><!-- wp:paragraph {"className":"gw-plat-label"} -->
<p class="gw-plat-label">Average rating from local customers</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-plat-value"} -->
<p class="gw-plat-value">4.9 ★</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-plat-row","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat-row"><!-- wp:paragraph {"className":"gw-plat-label"} -->
<p class="gw-plat-label">Serving this community</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-plat-value"} -->
<p class="gw-plat-value">15+ years</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-plat-row","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat-row"><!-- wp:paragraph {"className":"gw-plat-label"} -->
<p class="gw-plat-label">Fully licensed and insured</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-plat-value"} -->
<p class="gw-plat-value">Licensed</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-plat-row","layout":{"type":"default"}} -->
<div class="wp-block-group gw-plat-row"><!-- wp:paragraph {"className":"gw-plat-label"} -->
<p class="gw-plat-label">We make it right, or you do not pay</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-plat-value"} -->
<p class="gw-plat-value">Guaranteed</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Uses preset color and spacing slugs from the Groundwork theme (base, surface, accent, contrast). In another theme, map them to that theme's palette.