About this block

Logo Tabs Spotlight gives four customers one stage and lets the visitor choose who speaks. The section opens with a heading and a muted lede on the same row, then a single rounded container whose top edge is a row of customer tabs, each a mark beside a wordmark. The active tab lifts and joins the panel below it like a browser tab, while the others sit recessed.

Each panel pairs a portrait, inset 8px in the same language as the collection's trays, with a pull quote, its attribution in a mono micro label, and three result figures under a hairline. The portraits are cropped so every head sits at the same size and height, so switching tabs changes the person without the layout jumping.

When to use

Use it when you have several strong customer stories and do not want to pick one. It suits products sold across different industries, where a coffee chain, a builder and a manufacturer each prove a different point, and a buyer wants to find the story closest to their own.

A natural flow around it on a Modern SaaS page:

Before

• Feature Sections to explain what the product does before customers vouch for it
• Logo Clouds for a fast trust signal ahead of the full stories

After

• Pricing to turn the proof into a decision
• CTAs to close the page on a single action

What you can customize

• Customers. Each tab is one entry in the customers array: company, mark, person, role, portrait, quote and three results. Add or remove entries and the row follows.
• Portraits. Swap the images for your own. Crop them the same way, head at the same size and distance from the top, so tabs switch smoothly.
• Default tab. Set defaultValue on the Tabs root to open on the story you want seen first.

Tip: keep the quotes within a sentence or two of each other in length. The panel holds its height best when every story fills about four lines.