shadcn.io is not affiliated with official shadcn/ui
Card Inset Big Metric Checklist CTA Block for Ark UI
A card-in-card startup-program CTA split in two: one giant credit figure circled by a hand-drawn pen stroke in a hairline frame at the start, and the headline, a three-line checklist, a Shine Button and an eligibility note at the end.
Installation
Overview
A closing call to action for React with Ark UI for offers that come down to one number: credits, a grant, a discount. A muted shell with + marks on its corners wraps a raised panel that follows your theme, split in two. At the start, in a hairline frame of its own with + marks on its corners, the figure is set at the size of a headline with a pen stroke drawing a loop around it, over what it is for. At the end sit the h2, a three-line checklist with ticks, the Shine Button and a footnote with the eligibility rules. The copy comes first in the document, so a screen reader and a phone both read the headline first and the figure follows. The pen's ink is the foreground colour, so the Shine Button is the only primary thing in the block. It's built from Guides, Annotation Text and Shine Button, with CSS only for the entrance and your theme's tokens for every colour. For startup programs, credit offers, grants and enrolment pages.
FAQ
How do I change the figure and the eligibility rules?
Edit CREDITS and ELIGIBILITY at the top of the file. The figure is formatted from the number with a fixed en-US currency format, so it reads the same on the server and in the browser, and the footnote is written from the two limits. The checklist is the BENEFITS array: keep each line to one short sentence.
How is the circle drawn, and is the figure still text?
Annotation Text sets the figure in a mark and lays an SVG stroke over it, a little wobbly, drawn once along its length as the page loads. The figure stays real text that screen readers read as it is, and the stroke is aria-hidden: it carries no information. With trigger="mount" the stroke starts as soon as the block is on the page, so the first paint is never an empty figure.
What happens with reduced motion?
The stroke is simply there, already drawn, and the shell doesn't fade in. Nothing else moves.
Does it work right to left?
Yes. The stroke is mirrored in a right-to-left page, the checklist starts at the end, and the limits in the footnote are wrapped so "50" and "$5M" keep their order and the dollar sign stays put.
Where does the button go?
It's a link (href="#"): point it at your application form. It is a Shine Button, so a band of light sweeps across it once on hover and keyboard focus.
The button takes asChild with the link inside, so it can be your router's link.
Will a longer figure still fit on a phone?
The figure steps down from text-7xl to text-5xl on a phone and the loop is sized from the text, so a figure of up to about eight characters fits at 320 px, where the framed figure sits below the text. For a longer one, a shorter form such as "$250K" keeps the loop readable.