Three Step Cards

About this block

Three Step Cards opens with a centered heading and a one-sentence subheading that frames the process at a glance. Below the heading sits a three column grid of cards. Each card holds an icon badge in the top left corner, a step number in the top right, a bold step title, and a short description beneath it.

The heading copy, subheading, and each card's icon, title, and description are all independent. You can swap the three Lucide icons for any others that suit your product, rewrite every line of copy, or trim the card descriptions to a single sentence. The three column count is fixed, so this layout works best when your process has exactly three stages.

When to use

This layout suits any marketing page that needs to explain a short, sequential flow without slowing the reader down. For a logistics and delivery platform it is a natural fit on the homepage or a carrier signup page, where three cards can walk a new partner through connecting a fleet, setting pickup windows, and tracking every shipment live. Compared to a horizontal connector row, each card here carries more copy per step, so it handles brief explanations better than a purely visual flow.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to set the product context before the process is explained
• Features that highlight what the product does, leading into the how-it-works steps

After

• Testimonials to reinforce the process with real customer outcomes
• A CTA to convert readers who just finished scanning the steps

What you can display

Each card is a small container for one stage of your process. A few ways to fill it:

• Onboarding steps. Walk a new user through account setup, first action, and first result so they can picture the path from signup to value.
• Partner or seller flow. Show a carrier, vendor, or affiliate how to register, configure settings, and go live with minimal back and forth.
• Integration sequence. Describe connect, configure, and verify as three cards so a technical reader can judge the effort before they commit.

Tip: keep each card description to two sentences or fewer so all three cards stay visually even and nothing draws the eye out of the grid.