Stacked Cards
Vertically stacked icon cards, each with a title and short blurb. Reads top to bottom on any screen and keeps a long feature list easy to follow.
Vertically stacked icon cards, each with a title and short blurb. Reads top to bottom on any screen and keeps a long feature list easy to follow.
Search blocks by description or jump to a page.
Stacked Cards arranges six feature cards in a responsive grid: one column on small screens, two on medium, and three on large. Each card leads with a filled circular badge holding a single icon, a title set inline to the right of the badge, then a short paragraph below. No heading section sits above the grid, so the cards occupy the full width of their container and draw attention straight to the content.
The cards and their copy are fully independent. You can add or remove cards, swap the icons, rewrite every title and description, or reduce the grid to three items without changing the overall layout. The circular badge takes any icon from your icon set, making it easy to match the visual language of the rest of your page.
Reach for this block when you want to lay out a list of product benefits or service offerings without a surrounding narrative. It suits an ecommerce storefront that needs to communicate several selling points quickly, such as fast shipping, easy returns, a seller marketplace, or curated collections, before a visitor scrolls to product listings. Unlike a section with a headline and centred intro copy, this block gets straight to the point and works well mid-page after a hero has already set the context.
A natural flow around it on a Marketing (Legacy) page:
Before
After
A clean way to present parallel benefits or service pillars, each with its own icon. A few good fits for ecommerce and beyond:
Tip: keep each description to one or two short sentences so all six cards stay the same height and the grid reads as a single unit.