Search blocks by description or jump to a page.
Centered heading above three step cards, each pairing an icon and number with short copy.
The source for every Marketing block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
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.
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
After
Each card is a small container for one stage of your process. A few ways to fill it:
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.