shadcn.io is not affiliated with official shadcn/ui
Card Inset Big Metric Checklist CTA Block for React
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 Base 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 renders the link it's given with render, with nativeButton={false}.
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.
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 Metric Row CTA
Figures and statsA 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.
- Pro
Stat Hero CTA
Figures and statsA reverse split call to action with a giant hollow figure that floods with colour as it scrolls into view in the start cell, then a solid divider, a headline, one sentence, a Shine Button and a quiet second action.
- Pro
Hero With Stats
Stats and live dataA split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.
- Pro
Centered Metric Cluster CTA
Figures and statsA centred launch-day call to action with a scoreboard drawn as a framed figure: an Upvote button whose count rolls on press, flanked by the comment count and today's rank, and a Shine Button.