wptheme.com

Stats row: a free WordPress block pattern

Dark band of four headline numbers.

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.

Block markup

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"className":"gw-stats","backgroundColor":"accent-2","textColor":"accent-contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull gw-stats 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","layout":{"type":"grid","columnCount":4,"minimumColumnWidth":"9rem"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"gw-stat-value"} -->
<p class="gw-stat-value">2,500+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"base-2"} -->
<p class="has-base-2-color has-text-color">Jobs completed</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"gw-stat-value"} -->
<p class="gw-stat-value">4.9 ★</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"base-2"} -->
<p class="has-base-2-color has-text-color">Average rating</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"gw-stat-value"} -->
<p class="gw-stat-value">15+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"base-2"} -->
<p class="has-base-2-color has-text-color">Years in business</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"gw-stat-value"} -->
<p class="gw-stat-value">100%</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"base-2"} -->
<p class="has-base-2-color has-text-color">Satisfaction guarantee</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