Featured articles: WordPress Block Pattern

Make it yours.

Curate a few stories manually on a publication homepage.

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":"#f3eee4","text":"#203e35"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-text-color has-background" style="color:#203e35;background-color:#f3eee4;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"}}} -->
<p class="has-custom-font-size" style="font-size:12px">THE FIELD NOTES</p>
<!-- /wp:paragraph --><!-- wp:heading {"style":{"typography":{"fontSize":"38px"}}} -->
<h2 class="wp-block-heading has-custom-font-size" style="font-size:38px">Ideas worth making room for.</h2>
<!-- /wp:heading --><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://roarwp.com/images/patterns/studio-arch.webp" alt="Terracotta arch, cream stairs and an olive tree in a fictional architectural scene"/></figure>
<!-- /wp:image --><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">The shape of a slower morning</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example story · 5 minute read</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/story-one">Read the morning story</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Begin with less</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example story about choosing the useful things.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/story-two">Read about choosing less</a></p>
<!-- /wp:paragraph --><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">A room of your own</h3>
<!-- /wp:heading --><!-- wp:paragraph -->
<p>Example story about a quiet place to work.</p>
<!-- /wp:paragraph --><!-- wp:paragraph -->
<p><a href="https://example.com/story-three">Read about workspaces</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

What is included

group, paragraph, heading, columns, column, image

Validation

Structurally validated with the WordPress block parser; no live WordPress theme test. Checked September 18, 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

One story gets a visual lead.
Supporting stories keep clear descriptive links.

Customize the starting point

Replace sample stories, durations and links with real content.
Remove reading times unless calculated for the actual articles.
Use Query Loop instead if the list must update automatically.

On smaller screens

The featured story comes first when columns stack. Check the total image height on narrow screens.

Accessibility checks

Headings and link labels describe the story destinations. No image-only links are required.

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.

Personal blog homepage

How to create and set a custom WordPress homepage