Stacked Panels
Two stacked split panels pairing copy and checklists with app window mockups.
Two stacked split panels pairing copy and checklists with app window mockups.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Stacked Panels places two large rounded cards one above the other inside a single column. Each card splits into two columns at wider viewports: one side holds a heading, a short paragraph, a three item checklist with check icons, and a ghost button; the other side holds an SVG app window mockup. The two panels alternate which side the copy lands on, so the mockup switches from right to left between the first card and the second.
Both the copy blocks and the mockups are fully independent. You can rewrite the heading and paragraph in each card, swap the checklist items for your own talking points, relabel the buttons, and replace the mockup components with whatever in-app illustration fits your product. The two card structure is fixed, but removing one card and keeping only the other is a small change.
This layout suits a product marketing page that needs to explain two distinct capabilities side by side rather than listing them in a grid. For a developer tools company it is a natural fit: the first panel can show observability or analytics, the second can show workflow or deployment tooling. Each panel has enough room for a short proof point and a mockup, so readers get a concrete sense of the interface before clicking through. Compared to a six tile icon grid, the stacked approach works better when each feature deserves its own visual rather than a small icon.
A natural flow around it on a Marketing Pro page:
Before
After
Each panel is a self contained split layout you can adapt independently:
Tip: keep the checklist items parallel in length and structure so the two columns stay visually balanced across both panels.