Split With App Window

About this block

Split With App Window divides the section into two equal columns. The left column holds a heading, a short supporting paragraph, and a vertical checklist of four items, each prefixed with a small check icon. The right column is an app window mockup: a title bar with three decorative dots, a panel header labeled "Active campaigns" with a quarter badge, and four campaign rows below it. Each row shows a name, a channel badge, a progress bar, and a percentage figure.

The two columns are independent of each other. You can rewrite the heading and paragraph, swap out any of the four checklist points, and change the campaign names, channel labels, and progress values in the mockup without affecting the overall layout. The number of checklist points and campaign rows can each be increased or reduced to fit your content.

When to use

Reach for this block when you need to explain a reporting or tracking feature and want something more concrete than a checklist alone. The mockup gives ecommerce and marketing teams an immediate visual anchor: visitors see a working campaign view rather than reading about one. Compared to a plain icon grid, the split layout lets you make one specific claim and back it up visually in the same section, which is useful mid page after a hero has set broad context.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to establish the product promise before showing a specific capability
• How It Works to orient visitors on the workflow before diving into feature detail

After

• Cards With Mockups to continue the visual feature story with three smaller supporting capabilities
• A Testimonials section to add social proof once the core feature has landed

What you can display

The natural fit is a single high priority product capability paired with a live data mockup. A few other ways to use the frame:

• Campaign performance at a glance. Swap in your own active campaigns or channels to show real throughput numbers to prospects evaluating your marketing stack.
• Inventory or order status. Replace campaign rows with product SKUs and stock levels to demonstrate how an ecommerce team monitors their catalog in one view.
• Goal or budget tracking. Relabel the progress bars as budget consumed or quota attained to show finance and ops teams exactly what the dashboard surface looks like.

Tip: keep the progress values varied across the four rows so the mockup reads as live data rather than a placeholder.