Stacked Panels

About this block

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.

When to use

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

• A hero section to introduce the product and set context before the feature detail
• A How It Works block to orient readers on the overall flow before diving into specifics

After

• With Stat Band to follow the feature detail with headline numbers that reinforce the claims
• A Testimonials block to close with social proof once readers understand what the product does

What you can customize

Each panel is a self contained split layout you can adapt independently:

• Headings and checklist copy. Replace the three checklist items per panel with the specific proof points that matter most to your audience, keeping each item to one short phrase.
• App window mockups. Swap the analytics chart or the content queue list for any SVG illustration that reflects your actual product screens.
• Button labels and destinations. Each panel has its own ghost button; point them at dedicated feature pages, docs, or demo flows as needed.

Tip: keep the checklist items parallel in length and structure so the two columns stay visually balanced across both panels.