shadcn.io is not affiliated with official shadcn/ui
Metadata Tagline CTA Block for React
An event call to action as a band: the name and pitch, the struck standard price beside the early-bird price and a Shine Button, over a closing masthead band of three facts.
Installation
Overview
Close an event page with this call to action for React with Base UI. Between the page column's rails, the conference's name, Lantern Conf, and a two-line pitch sit on the start side. On the end side the standard ticket price is struck through beside the early-bird price with the saving worked out for you, then one Shine Button to get a ticket and a line of small print. A closing masthead band under a hairline holds three facts, each a large figure over a small label (3 days, 40 talks, 500 seats), split by hairlines like the dateline of a newspaper. It's built from Data List, Badge, Shine Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For conferences, workshops, cohort programmes and any launch where three quick facts decide whether to read on.
FAQ
How do I change the masthead facts?
Edit FACTS at the top of the file: each entry is a label and a value. The strip is a description list, so a screen reader hears each pair as a label and its value ("Days, 3"), and it keeps three equal columns down to a 320 px screen. Keep the labels to one short word; with a fourth fact, change grid-cols-3 to grid-cols-4 and shorten the figures. There are no dates in it on purpose: a date goes stale, a count of days, talks and seats doesn't.
How are the saving and the percentage worked out?
REGULAR_PRICE and EARLY_PRICE are the only two numbers you type. The saving and the percentage in the badge are worked out from them with whole-number arithmetic, rounded down ($200 off $499 is 40%), so the badge can never disagree with the prices. EARLY_TICKETS feeds the small print and CURRENCY the symbol.
Do screen readers hear the struck price?
Yes, and as a pair: the old price is read as "Was $499" and the new one as ", now $299", so the discount isn't lost when the strike can't be seen. Both amounts keep a left-to-right direction in a right-to-left page so the currency sign stays beside the figures.
How is the band drawn?
The masthead closes the block, so the column has no bottom padding. Its top rule and the + marks on its ends come from a Guides with rules="top" and no sides, and divide-x splits the three cells. The next block's top rule is the band's bottom edge.
Where does the button go?
Get your ticket is a real link (href="#"): point it at your checkout or ticket page. It is a ShineButton with render set to an a element and nativeButton={false}.
What moves, and what happens with reduced motion?
The title, the pitch, the price and the masthead fade up one after another when the section loads, with CSS transitions only. With reduced motion they are simply there. The button's light sweeps across it once on hover or keyboard focus, and with reduced motion it fades in where it stands.
Related
- Pro
Price Savings CTA
Prices and offersA card-in-card bundle call to action: the three products as pills and two bars, what they cost bought separately at full width and a shorter bundle bar with the gap labelled You save, then a Shine Button.
- Pro
Savings Badge CTA
Prices and offersA card-in-card price call to action: a big monthly price over its struck list price, with a twelve-point starburst sticker in foreground tones reading the percent saved, then a Shine Button and an outline link.
- Pro
Progress Urgency CTA
Urgency and limitsA centred scarcity statement: a headline over a framed seat map of 200 dots, one per founding seat, with the claimed ones solid and the next open ones pulsing, then the price with its list price struck and a Shine Button.
- Pro
Centered Event Details CTA
With a closing bandA centred call to action that follows the page theme, for a live event: a pill, the title and the Shine Button, then three bands between solid rails: the details in cells, the speakers with their roles and a seats meter.
- Pro
Early Bird Pricing
Discounts and offersFounder seats that run out: '163 of 200 claimed' at display size over a bar of forty segments, with the one founder plan, its struck regular price and its lifetime price beside the features.
- Pro
Centered Countdown Timer Hero
Signup and waitlistA compact centred launch hero on solid rails with a live countdown as a full-width band of four cells and an email form whose Shine Button shows its loading and success states.