Accordion With Preview

About this block

Accordion With Preview splits into two equal columns on large screens. The left column opens with a heading and a short lead sentence, then a single-open accordion of four feature items. Only one item expands at a time, showing its description beneath the trigger. The right column holds a framed app window mockup: a title bar with three dot controls, a full-width bar chart card, and two smaller stat tiles showing lead count and conversion rate beneath it.

The heading, lead sentence, and all four accordion items are plain text you can rewrite freely. You can add or remove accordion items without touching the preview panel, and the preview panel itself can be replaced with any other mockup that fits a card frame. The two-column layout collapses to a stacked single column on smaller viewports.

When to use

Reach for this block when you need to walk a prospect through several distinct capabilities without cluttering the screen. It suits a services or capabilities section on a creative agency or studio site, where each accordion item names a deliverable and the preview panel shows the kind of dashboard or output the client receives. It is more focused than an icon grid because the accordion forces one idea at a time, and it carries more visual weight than a plain text list because the live preview keeps the right column active.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to establish the offer before diving into specific capabilities
• A process section if you want to show how the work gets done before showing what it produces

After

• Stacked Panels to continue with deeper feature detail in a split-panel format
• A testimonials section to let clients confirm what the accordion copy promises

What you can display

The block suits any product or service that has four to six discrete capabilities worth calling out individually. A few directions to take it:

• Service deliverables. List each output a client gets, such as campaign planning, live reporting, automation, and brand governance, with a short sentence on the value of each.
• Product feature highlights. Name the four features that answer the most common objections, letting the preview window show the relevant screen for whichever item is open.
• Workflow stages. Walk the reader through how work moves from brief to delivery, using each accordion item as a phase and the mockup as a snapshot of the tool at that stage.

Tip: keep each accordion description to two sentences at most so the panel stays compact and readers do not have to scroll to see the preview.