shadcn.io is not affiliated with official shadcn/ui
Card Inset Step List CTA Block for React
A reverse-split card-in-card call to action for a migration: a ruled timeline of three steps with a time chip each and a closing total, beside the headline and a Shine Button, with trust points on the shell beneath.
Installation
Overview
A closing call to action for React with Base UI that shows how little there is to do. Between the page's solid rails, a muted shell with + marks on its corners holds a raised panel split at a hairline. On the start side, a tinted cell holds the three steps as cards joined by a hairline, each numbered, with a chip for how long it takes, and a closing row that adds the chips up. On the end side are the headline, a line of reassurance and one Shine Button. Under the panel, on the shell itself, two trust points sit in a footer, outside the panel: the signature of the inset family. In the source the pitch comes first, so on a phone it leads, and the steps stack under it. It's built from Guides, Badge and Shine Button, with CSS only for the entrance and your theme's tokens for every colour, so it follows a light or a dark theme. For migration, onboarding and switch-from-a-competitor prompts where the effort is the objection.
FAQ
How do I change the steps and the total?
Edit STEPS at the top of the file: each step has a label and a number of minutes. TOTAL_MINUTES adds them up, so the closing row always matches the chips; change a step's time and the total follows. The numbers in front of the steps are drawn by the list itself, so adding or removing a step renumbers the rest.
Is it a real numbered list?
Yes, an ordered list: a screen reader announces "list, 3 items" and each step's position. The numbers you see are a decoration drawn with a CSS counter and hidden from assistive technology, which already gets the order from the list. The hairline joining the circles is decoration too.
Why do the steps come second in the source but first on screen?
Reading order follows the pitch: headline, line, button, then the steps. From lg the steps are moved to the start column with grid placement, not order, so the tab order and the reading order stay the same as the source.
Why are the trust points outside the panel?
They sit on the shell, a second, quieter row that belongs to the card rather than to the pitch. They take the page's colours, so they read as a note on the card rather than as part of the call to action. Move them into the panel if you'd rather they sat under the button.
Related
- Pro
Card Inset Benefits Stack CTA
Card in cardA centred card-in-card CTA for a managed cloud: the headline, a Shine Button and an outline button, then three benefits drawn as a deck of cards that fan apart into a row on hover or focus.
- Pro
Card Inset Feature Checklist CTA
Card in cardA card-in-card enterprise CTA: a start-aligned header with a Shine Button at its end, over a hairline-divided grid of six features in two columns, each with an info button that opens a one-sentence explanation.
- Pro
Card Inset Shield Trust List CTA
Trust and securityA centred card-in-card guarantee that follows your theme: a headline naming the refund window over a band of three terms on shared hairlines, each promise with its value at display size, and one Shine Button.
- Pro
Centered Light Numbered Steps CTA
Lists and stepsA centred card-in-card call to action for a deploy platform: a headline, a sentence and the Shine Button, over a closing band of three setup steps staggered along a dashed path that draws itself once.
- 123Pro
Centered Three-Step Process Hero
Updates and timelinesA compact centred how-it-works hero for an invoicing app: a headline, a Shine Button with an outline action and trust copy over a closing band of three step cells, each with a small drawing of its screen.
- Pro
Left Right CTA with Progress Ring Tracker
Lists and stepsA band call to action between solid rails: a headline, a sentence and the Shine Button at the start, and at the end a framed figure with a progress ring drawn in three arcs, one per setup step, with the steps listed beside it.