About this block

Icon Card Grid with CTA lays out a product's foundations as a grid of equal cards and spends the last cell on the ask. A heading row opens it: a two line heading on the left and a short muted lede at the right edge, both resting on the same baseline. Below sits a three by two grid. Five cards each carry a line icon on a small badge tile at the top and a title with a two line blurb at the foot, so the eye reads down the icons and then across the copy.

The sixth cell is the call to action. It sits on the primary surface with its own title, a one sentence invitation and an inverted pill, so it reads as part of the grid and still stands apart from it. Every surface is mixed from theme tokens, so the grid follows light, dark and any theme you install.

When to use

Use it when a product rests on a handful of capabilities that matter equally, such as incident tooling, an operations platform or a developer service, and you want the reader to act right after scanning them. The CTA cell keeps the ask inside the section, so there is no need for a separate banner below.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to state the promise
• Logo Clouds to put names behind it

After

• Testimonials to back the foundations with a customer's word
• Pricing to move the reader toward a plan

What you can customize

• Features. Edit the features array: a lucide icon, a title and a blurb each. Keep the blurbs to the same length so the cards end together.
• The CTA cell. Rewrite its title, invitation and pill label, and point the pill at your demo or booking flow.
• Columns. The grid runs three columns from lg, two from sm and one below. Five features and the CTA fill it evenly at every step.

Tip: titles work best as one word. A longer title wraps at the two column width and pushes its blurb out of line with the card beside it.