# Modern SaaS Feature: Figure Card Trio

A heading row with a ghost pill over three cards, each an isometric hairline figure in a quiet pane above a title and a two line blurb.

- Page: https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/figure-card-trio
- Collection: [Modern SaaS](https://www.shadcn-ui-blocks.com/blocks/modern-saas), Premium tier
- Group: [Features](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections)
- Created: 2026-11-02
- Preview image: https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/figure-card-trio.png

## Install

```bash
npx shadcn@latest add @shadcn-ui-blocks/modern-saas-feature-sections-figure-card-trio
```

Needs an API key from a Pro or Team plan: add `@shadcn-ui-blocks` to the registries in components.json with the key as an `Authorization: Bearer` header. Setup: https://www.shadcn-ui-blocks.com/docs/shadcn-cli. The MCP server installs it without the setup: https://www.shadcn-ui-blocks.com/docs/mcp.

## Depends on

- npm packages: class-variance-authority, radix-ui
- shadcn/ui components: depth-button, surface
- Installs to: `@/components/blocks/modern-saas/feature-sections/figure-card-trio`

## About this block

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](https://www.shadcn-ui-blocks.com/blocks/modern-saas/hero-sections) to state the promise
- [Logo Clouds](https://www.shadcn-ui-blocks.com/blocks/modern-saas/logo-clouds) to show who already uses it

**After**

- [Integrations](https://www.shadcn-ui-blocks.com/blocks/modern-saas/integrations) to show where the reports
  get their data
- [Pricing sections](https://www.shadcn-ui-blocks.com/blocks/modern-saas/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.

## More in Modern SaaS Features

- [App Workspace](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/app-workspace)
- [Assistant Snippet Grid](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/assistant-snippet-grid)
- [Benefits Isometric](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/benefits-isometric)
- [Bento Grid](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/bento-grid)
- [Capability Columns](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/capability-columns)
- [Capability Diagram Cards](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/capability-diagram-cards)
- [Capsule Card Trio](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/capsule-card-trio)
- [Icon Card Grid with CTA](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/icon-card-grid-with-cta)
- [Illustrated Cards](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/illustrated-cards)
- [Metric Interlude](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/metric-interlude)
- [Mockup Panel Trio](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/mockup-panel-trio)
- [Node Bento Grid](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/node-bento-grid)
- [Product Showcase](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/product-showcase)
- [Split Checklist Panel](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/split-checklist-panel)
- [Three Columns with App Mockup](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections/three-columns-app-mockup)