Services grid: WordPress Block Pattern

Make it yours.

Explain three distinct services without forcing visitors through vague category labels.

Free to use · Core blocks only · CC0 licence

Raw block markup

Select and copy the markup

<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"color":{"background":"#ffffff","text":"#203e35"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#203e35;background-color:#ffffff;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:heading {"style":{"typography":{"fontSize":"34px"}}} -->
<h2 class="wp-block-heading has-custom-font-size" style="font-size:34px">A little clarity. A better space.</h2>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Choose the support that fits your project.</p>
<!-- /wp:paragraph --><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Interior planning</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Layouts that make room for the way you work and live.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/planning">See planning services</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Material direction</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>A considered palette of surfaces, finishes and details.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/materials">See material services</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Project guidance</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Practical decisions from the first sketch to the final detail.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/guidance">See project guidance</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

What is included

group, heading, paragraph, columns, column

Validation

Structurally validated with the WordPress block parser; no live WordPress theme test. Checked September 29, 2026.

Licence

Copy, adapt and use commercially under CC0.

Use this layout in WordPress

Copy the blocks and paste into an empty location in a draft page. If they appear as plain text, paste using the editor’s Code editor, then return to Visual editor.
Replace all sample text and example.com links. Replace demo images through Media Library; remote image URLs do not create local attachments.
Use List View to select the outer Group and inner blocks. Review colors, spacing, headings and button links.
Preview on desktop and mobile before publishing. For a header or footer, paste into the appropriate template part.

Why the arrangement works

A shared heading introduces the service choices.
Each column states a different service and its role.
Specific link labels explain what the destination contains.

Customize the starting point

Replace the services with genuinely different offerings.
Keep each description short enough to scan.
Link directly to a page that explains the corresponding service.

On smaller screens

Columns stack in reading order. Check that each link follows its own service description.

Accessibility checks

Service headings are H3 beneath the H2 section heading. Links do not rely on an unlabeled icon.

Theme defaults affect the final appearance. The live preview is rendered from the copied markup with a neutral baseline and does not promise pixel-identical results across themes.

Read the official pattern instructions and RoarWP pattern guide for syncing and customization.

Use this layout in WordPress

Why the arrangement works

Customize the starting point

On smaller screens

Accessibility checks

Keep building from here.

Freelancer homepage

WordPress block patterns: how to use and edit them