shadcn.io is not affiliated with official shadcn/ui
Card Inset Step List CTA Block for Solid
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 Solid with Ark 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.