shadcn.io is not affiliated with official shadcn/ui
Card Inset Metric Row CTA Block for Vue
A start-aligned card-in-card CTA for an API platform: a headline, one sentence and two calls to action, with three platform figures in a closing band across the foot of the panel.
Installation
Overview
A card-in-card call to action for Vue with Ark UI. A muted shell with + marks on its corners wraps a raised panel that is light on a light page and dark on a dark one. At the start, a large left-aligned headline, a short paragraph and two buttons, the Shine Button and an outline one; across the foot of the panel, a closing band tinted a step darker holds three platform figures (calls per day, uptime, latency) between hairlines, side by side from sm and one per row on a phone. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For infrastructure products, developer platforms and any closing section where a few hard numbers earn the click.
FAQ
How do I change the figures?
Edit METRICS at the top of the file: each entry is a value and a label. Each figure is a term and its description in one list, with the label under the value, so a screen reader hears "API calls per day, 2.4B+". Keep it to three: they sit side by side in the band from sm and stack, one per row, below it.
Why is the latency written as Under 50 ms?
A figure that carries a sign or a unit is wrapped in a bdi element, so a right-to-left layout keeps "99.99%" and "Under 50 ms" in reading order instead of moving the sign or the unit to the wrong side. The comparison is written as words because a bare less-than sign breaks in markup and reads badly aloud.
Where do the buttons go?
Both are links (href="#"): point Start building at your sign-up and View documentation at your docs. Start building is a Shine Button: a band of light sweeps across it once on hover and keyboard focus.
Each button takes asChild with the link inside, so it can be your router's link.
Does the inner panel follow my theme?
Yes. The panel has no dark scope, so it is light on a light page and dark on a dark one. Nothing is a fixed colour, so it follows whichever preset you install, and the muted shell, the shadow and the ring keep it separate from the page in both modes.