shadcn.io is not affiliated with official shadcn/ui
Card Inset Shield Trust List CTA Block for React
A 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.
Installation
Overview
A closing call to action for React with Base UI that makes a guarantee feel as plain as a contract. Between the page's solid rails, a muted shell with + marks on its corners holds a raised panel (a card with a soft shadow and a hairline ring). It opens with a headline that names the refund window and a short line, then a terms band across the full width of the panel: three cells on shared hairlines with + marks on the band's corners, each a promise with what it is worth at display size ("30 days", "One click", "Yours to keep"). One Shine Button closes it, with a shield beside the small print under it. On a phone the three cells become rows, the label at the start and the value at the end, so the button stays on the first screen. It's built from Guides and Shine Button, with CSS only for the entrance and your theme's tokens for every colour, so it's light in a light theme and dark in a dark one. For pricing pages, checkout steps and trial prompts where the risk is what holds people back.
FAQ
How do I change the terms?
Edit REFUND_DAYS and TERMS at the top of the file. The headline reads REFUND_DAYS and so does the first cell, so the window is written once; each other cell is an icon, a label and a value. Keep the values short, two or three words: they are set large, and wrap onto a second line on a very narrow screen rather than overflowing.
Are the terms a real list?
Yes. They are a description list: each cell is a term and its description, so a screen reader announces "Refund window, 30 days" as a pair, whichever way the cells are laid out. On a desktop the value is drawn above its label, but the label comes first in the source. The icons and the shield are decoration and are hidden from assistive technology.
What does the block claim?
Only what its own terms say: nothing about how many customers there are or how few ask for a refund. Add a figure like that only when you can stand behind it, and put it in the line under the headline.
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
Shield Seal CTA
Trust and securityA band guarantee call to action: the headline, a Shine Button and an outline link on the start side, and a flush tinted cell on the end side with a seal of text turning slowly round a shield, with a pause button.
- Pro
Icon Medallion CTA
Trust and securityA split security prompt for a password vault: the headline and two actions at the start, and at the end a settings panel where a medallion swaps from an alert shield to a checked one when the two-factor switch turns on.
- 30Pro
Money Back Hero Pricing
Proof and guaranteesOne plan sold on its guarantee: an oversized 30-day seal, its promise written round the edge, beside the plan's price, features and call to action.
- Pro
Pricing With Guarantee
Proof and guaranteesA free trial with a refund window drawn as a timeline: today, day 12, day 14 and day 30 on one line, beside the yearly plan, its price and call to action. It turns vertical on a phone.