Cards With Mockups
Three feature cards, each topped with a small chart, list, or form mockup.
Three feature cards, each topped with a small chart, list, or form mockup.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Cards With Mockups opens with a centered heading and a single supporting sentence. Below that sits a three column grid of feature cards. Each card holds a small inline mockup at the top (a bar chart, a task checklist, or a minimal form), followed by a short bold title and one or two lines of descriptive copy. The mockups are purely visual, built from simple shapes, so they read as product previews without requiring real screenshots.
All three cards are equal in weight and can be edited independently. The heading and subtext are a single block of copy you can reword freely. You can swap out any mockup illustration for another style, reorder the cards, or update each title and description to match your own feature set.
Reach for this layout when you need to introduce three parallel product capabilities at once and want each one to feel concrete rather than abstract. It suits an AI assistant product particularly well: showing a metrics view, a task queue, and a data capture form side by side signals breadth without overwhelming the reader. Compared to a plain icon grid the inline mockups give each feature a visual anchor, and compared to a bento layout the equal columns keep all three ideas at the same level of importance.
A natural flow around it on a Marketing Pro page:
Before
After
Each card is a self contained slot. A few ways to fill them:
Tip: keep each card description to one short sentence so the three cards stay visually balanced and none of the mockups gets pushed down.