wptheme.com

Trust bar: a free WordPress block pattern

Four short trust signals (licensed, reviews, guarantee, response time) in a row that becomes two-up on phones.

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|50","bottom":"var:preset|spacing|50"}}},"backgroundColor":"surface","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-surface-background-color has-background" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- 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","fontSize":"large"} -->
<p class="gw-stat-value has-large-font-size">4.9 ★</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2","fontSize":"small"} -->
<p class="has-contrast-2-color has-text-color has-small-font-size">Average rating from local customers</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","fontSize":"large"} -->
<p class="gw-stat-value has-large-font-size">15+ years</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2","fontSize":"small"} -->
<p class="has-contrast-2-color has-text-color has-small-font-size">Serving this community</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","fontSize":"large"} -->
<p class="gw-stat-value has-large-font-size">Licensed</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2","fontSize":"small"} -->
<p class="has-contrast-2-color has-text-color has-small-font-size">Fully licensed and insured</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","fontSize":"large"} -->
<p class="gw-stat-value has-large-font-size">Guaranteed</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2","fontSize":"small"} -->
<p class="has-contrast-2-color has-text-color has-small-font-size">We make it right, or you do not pay</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