Results: 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-results","backgroundColor":"accent-2","textColor":"accent-contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull gw-results has-accent-contrast-color has-accent-2-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"wide","className":"gw-results-head","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"bottom"}} -->
<div class="wp-block-group alignwide gw-results-head"><!-- wp:paragraph {"className":"gw-label"} -->
<p class="gw-label">By the numbers</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","className":"gw-ledger","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide gw-ledger"><!-- wp:group {"className":"gw-ledger-row","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"bottom"}} -->
<div class="wp-block-group gw-ledger-row"><!-- wp:paragraph {"className":"gw-ledger-amount"} -->
<p class="gw-ledger-amount">2,500+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-case"} -->
<p class="gw-ledger-case">Jobs completed</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-year"} -->
<p class="gw-ledger-year"></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-ledger-row","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"bottom"}} -->
<div class="wp-block-group gw-ledger-row"><!-- wp:paragraph {"className":"gw-ledger-amount"} -->
<p class="gw-ledger-amount">4.9 ★</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-case"} -->
<p class="gw-ledger-case">Average rating</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-year"} -->
<p class="gw-ledger-year"></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-ledger-row","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"bottom"}} -->
<div class="wp-block-group gw-ledger-row"><!-- wp:paragraph {"className":"gw-ledger-amount"} -->
<p class="gw-ledger-amount">15+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-case"} -->
<p class="gw-ledger-case">Years in business</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-year"} -->
<p class="gw-ledger-year"></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-ledger-row","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"bottom"}} -->
<div class="wp-block-group gw-ledger-row"><!-- wp:paragraph {"className":"gw-ledger-amount"} -->
<p class="gw-ledger-amount">100%</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-case"} -->
<p class="gw-ledger-case">Satisfaction guarantee</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-ledger-year"} -->
<p class="gw-ledger-year"></p>
<!-- /wp:paragraph --></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.

See it in a live site

• Hale & Ortiz theme