Modern SaaS Feature: Figure Card Trio

Figure Card Trio presents three features of a reporting product as three cards in a row. A heading row opens it: a one line heading over a two line lede on the left, and a ghost pill on the lede's last line at the right.

Each card is a Surface sheet with a media pane on top and a short body under it. The pane holds an isometric hairline figure: a bar chart standing on a tray, a funnel narrowing step by step, and a pie with one slice lifted out. The body carries a one line title and two lines of text, so the three cards end level.

When to use

Use it when a product has three related features that each deserve a picture, such as charts, funnels and segments in an analytics tool. The figures are drawn as line work rather than screenshots, so the section stays calm next to a busy hero or a dense product tour.

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

• Integrations to show where the reports get their data
• Pricing sections to turn interest into a plan

What you can customize

• Cards. Edit the cards array: a title, two lines of text and the figure to show. Keep every text to two lines so the cards stay level.
• Figures. columns, funnel and wedges are lists of strokes in a 298 by 176 box. Each stroke is a silhouette, a highlighted silhouette or a crease, and its color is mixed from the pane toward the foreground, so the figures follow any theme.
• Heading row. Change the title, lede and pill label. The stack stays inside 40 percent of the row from lg, and the pill moves under the lede below it.

Tip: give one part of each figure the highlighted stroke, the tallest bar or the lifted slice, so every card has one place for the eye to land.