About this block

Capsule Card Trio tells three short stories side by side. A heading row opens it, a two line heading on the left and a muted text link to customer stories at the right edge, and below it three tall cards stand together in one muted inset tray. Each card carries a title and a two line subtitle at the top and, at its foot, a capsule of round chips that says the same thing at a glance.

The three capsules each use a different language. The first writes a routine as a small sum of icons, a booked visit plus a location giving a logged visit. The second stacks the real marks of connected apps, and the third stacks the faces of the team with a count for everyone else. The tray is the only inset; the cards are plain surfaces, and every chip carries its depth pair.

When to use

Use it to make a broad claim concrete, such as a track record, a way of working or a set of promises, where each card needs one image rather than a paragraph. It suits service businesses and vertical software, where routines, integrations and people are what a buyer weighs.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to state the promise
• Feature Sections that show the product in detail

After

• Testimonials to follow the customer stories link with a customer's own words
• A CTA to close the page

What you can customize

• Cards. Edit the cards array: a title, a subtitle as two lines, and the capsule to show. Keep the subtitles to the same length so the cards match.
• Capsules. recipe, apps and team are small pieces of markup. Swap the lucide icons, the Simple Icons glyphs or the avatars for your own.
• Layout. The cards sit in a row from lg and stack below it, where each card shortens to fit its content.

Tip: keep a capsule to five chips. The overlap is tuned so five sit comfortably inside a card at every width.