About this block

Mockup Panel Trio shows a product at work in three small scenes. A heading row opens it, a two line heading on the left and a muted text link on its last line at the right, and below it three tall muted panels stand side by side, each holding one product moment with a title and a two line blurb under it.

The scenes follow a sales assistant through a day: two leads ready to contact with a teammate's cursor resting on one, a brief of what was prepared overnight with the first call of the morning, and a discovery call that writes its own notes and updates the CRM record. The last scene uses the real Google Meet, Google Docs and HubSpot marks. Every card inside the panels is a Surface sheet, and every chip and pill carries its depth pair.

When to use

Use it for a product whose value is in work done on the user's behalf, such as an assistant, an automation tool or a CRM, where a small piece of the real interface says more than an icon. Three moments read as a sequence, so the section can tell a short story as well as list features.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to state the promise
• Logo Clouds to show who already uses it

After

• Feature Sections that go deeper on one of the three moments
• Testimonials to let a seller describe the morning in their own words

What you can customize

• Columns. Edit the columns array: a title, a blurb and the mockup to show. Keep the blurbs to the same length so the three columns end level.
• Mockups. leadList, brief and timeline are plain markup built from theme tokens. Rewrite the rows in leads, prepared and changes, swap the avatars, or replace the Simple Icons glyphs with the tools you connect.
• Layout. The panels sit in a row from lg and stack below it. The mockups are drawn at 320px and shrink as one piece where a column is narrower.

Tip: give each mockup one clear focal point, such as the cursor, the first call or the plus at the end of the timeline, so the eye lands in the same place in every panel.