shadcn.io is not affiliated with official shadcn/ui
Guarantee Ribbon Banner Block for Vue
A centred refund guarantee for a notebook app: a corner ribbon reading Secured, a shield, a heading, one sentence, the 30-day window drawn as a bar of thirty cells, and fine print under a rule.
Installation
Overview
A refund guarantee card for Vue with Ark UI. A centred card framed by + marks on its corners wears a ribbon across its start-top corner reading "Secured". Under it: a shield, "30-day refund on every annual plan", one sentence about how to ask, the 30-day window drawn as a bar of thirty cells labelled Day 1 and Day 30, and a row of fine print on a faintly tinted foot under a solid rule. There is no button: the card is a promise, and the call to action belongs to the page around it. The cells fill in one after another once on load. The ribbon is a rotated strip of plain CSS, clipped by the card's own box. It's built from Guides, with your theme's tokens for every colour. For refund and money-back promises, trials with no card, and any guarantee with a clear window.
FAQ
How do I change the refund window?
Change the number in the heading and in the sentence, the length of DAYS (30 cells) and the labels under the bar, and the bar's grid (grid-cols-[repeat(30,…)]). The bar is a picture of the window, not a control: it's hidden from assistive technology because the heading and the sentence already say it, so keep them in step with it.
What does the copy promise?
That the full amount goes back to the card used, if you write within 30 days of paying, on annual plans. The fine print says monthly plans can be cancelled at any time. Change the copy to match your real terms, and keep the card honest: a guarantee with exceptions should name them in the fine print, not hide them.
How does the corner ribbon work?
It's one span: a 9rem strip, turned 45 degrees with -rotate-45, parked across the corner with logical offsets (-start-9 top-7) inside a box with overflow-hidden and rounded corners, so the strip's ends are cut off by the card. The frame's + marks sit outside that box. Its label is real text, read before the heading.
What happens in a right-to-left layout?
The ribbon moves to the end-top corner and turns the other way (rtl:rotate-45), so it keeps crossing the corner the same way. The bar fills from the right, with Day 1 on the right, because a window reads in the reading direction.