A three-column feature grid with numbered cards, built as a Gutenberg pattern from core blocks only. A centered eyebrow, heading and intro sit above six soft gray cards, each with a blue number badge (01 to 06), a short title and a description. It is a clean features section for SaaS products, apps and service websites, and also works as a services grid or a list of benefits.
How it works
A full-width white Group with a 1160px content width holds a narrow Group (720px) for the centered header text and a Group with Grid layout (3 columns, minimum column width 300px, 24px gap). Each card is a Group with Stack layout, a #f5f7fa background, a 1px #e8ecf2 border and a 16px radius. At the top of each card a small Group with a #2563eb background and 10px radius holds the number, followed by an H3 and a paragraph. Because of the minimum column width the grid drops to two columns on tablets and one column on phones without any extra settings.
Use cases
SaaS and software sites: list the six main product features below the hero
Agencies and studios: number the services you offer, from strategy to support
Onboarding or process pages: use the numbers as steps in a six-part process
Pricing pages: explain what every plan includes above or below the pricing table
How to use it
Copy the block markup.
Paste it into an empty paragraph in the block editor.
Replace the heading, the intro and the six card texts with your own.
Customization
Columns: select the grid Group and change Layout > Columns (3) and Minimum column width (300px).
Card style: each card Group uses Color > Background #f5f7fa, Border 1px #e8ecf2 and radius 16px; Dimensions > Padding 36px / 32px.
Number badge: the small Group uses Color > Background #2563eb and Border radius 10px; change the color for a different accent, or the radius to 999px for round badges.
Card titles: H3 at Typography > Font size 21px, weight 700, Color > Text #0f172a.
Eyebrow: the "Features" paragraph uses Color > Text #2563eb, uppercase with 0.14em letter spacing.
More or fewer cards: duplicate or delete a card Group (Options > Duplicate) and renumber the badges.
Spacing: the outer Group has Dimensions > Padding 112px top and bottom and a 64px block spacing between header and grid.
Accessibility
The section heading is an H2 and each card title an H3, so the outline reads correctly in screen readers and in the editor's List View. The numbers are plain text before each title. Slate text (#475569) on the light gray cards and white on #2563eb meet WCAG AA contrast.
Three-Column Feature Grid with Numbered Cards at a glance
Can I use the Three-Column Feature Grid with Numbered Cards code for free?
Yes. You can copy or download the block markup and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.
How do I add it to my WordPress site?
Copy the block markup, open a page in the block editor, click into an empty paragraph and paste. WordPress turns it into regular blocks that you can edit like any other content. You can also paste it in the Code editor view (Options menu > Code editor).
Does it need a page builder or plugin?
No. The pattern is built only from core blocks such as Group, Columns, Heading, Image and Buttons, so it works without Elementor, Spectra, Kadence or any other plugin. Colors and spacing are set on the blocks themselves; headings and text use your theme's fonts.
Will it look the same in my theme?
The layout, colors and spacing come with the blocks, so they carry over. Fonts, link styles and the content width follow your theme, so small differences are normal. The live demo shows the pattern in the default Twenty Twenty-Five theme. It works best with block themes; in classic themes the block editor still renders it, with your theme's styles.
Does it work on mobile?
Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.
How to install
Copy the block markup above.
Open a page or post in the WordPress block editor, click into an empty paragraph and paste. The editor turns the markup into blocks.
Replace the sample text and images. To reuse it, select the blocks and choose Create pattern from the block toolbar menu.
Uses only core WordPress blocks, so no plugin is needed. Tested with WordPress 6.8 and later. Fonts come from your theme; the live demo uses the default Twenty Twenty-Five theme. WebDevSnippets is not affiliated with or endorsed by the WordPress Foundation.
Three-Column Feature Grid with Numbered Cards · WordPress Feature Sections
