Trial Banner Card
Trial status card showing days remaining, what happens at expiry, an add payment method CTA, and an explicit no silent charge pledge.
Trial status card showing days remaining, what happens at expiry, an add payment method CTA, and an explicit no silent charge pledge.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Trial Banner Card is the trial status surface, a card headed Business trial with a 6 days left badge and the end date Jun 19, 2026. A detail panel below shows the day counter, then three honest bullet points: workspace drops to Free automatically, no data is deleted, and members over the Free seat limit become read-only not removed. A muted footer names the account email, avery@acme.com, with the explicit pledge: we will never charge you without an active payment method on file.
Trial constants (days left, end date) sit above the component so a build step or server prop can inject the real values. The what-happens list is the copy that stops the did-I-lose-my-data support ticket.
Reach for this block at the top of the billing page during an active trial, shown only when the trial is live. Wire TRIAL_DAYS_LEFT and TRIAL_END_DATE from your subscription state and link the Add payment method button to your payment portal.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the Business trial countdown. Other trial states:
Tip: name the account email in the footer so users know which inbox to watch for the reminder.