Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Two-Tone Split Banner Block for Svelte

A seasonal offer on a split: a tinted half with 40% off in display type, and a plain half with the struck list price, the worked-out sale price per seat and a Shine Button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An offer banner for Svelte with Ark UI. Between the page's rails, a split on a solid divider that meets the top rule, in two tones that come from structure: the start half is a faint tint with "This month only" and "40% off the Team plan" in display type, the end half is the plain page with the list price struck through, the sale price beside it per seat per year, one sentence on who it applies to and a Shine Button. The sale price is worked out from the list price and the percentage in the file, so the numbers can't drift apart. There is no end date to go stale. It's built from Badge, Shine Button and Guides, with your theme's tokens for every colour. For seasonal discounts, plan promotions and any offer whose price should be visible.

FAQ

How is the sale price worked out?

OFFER holds the list price (480) and the percentage off (40); SALE_PRICE is the list price times the share that remains, 480 times 60%, which is 288. Change either number and the sale price follows. The percentage in the heading comes from the same object. The fixed-price line says per seat per year, so state your own billing unit.

How do screen readers hear the prices?

The struck price is a del and the two prices are read in order with short visually hidden words: "Was $480, now $288 per seat per year". Both prices are one dir="ltr" run each, so they keep their order in a right-to-left layout.

Why is there no black half?

The two tones are a tint and the plain page, so the block follows your theme in light and dark. A forced black half would break other themes and compete with the page's own hero; the display type and the tint carry the emphasis.

Why does it say This month only and not a date?

A date goes stale and a fixed one has to be edited. If the offer ends on a day, replace the badge with a countdown (see the countdown banners) or the date in your own format.

How does it fit on a phone?

The tinted half comes first, then the details under a rule. The prices wrap if they must, and at 320 pixels nothing scrolls sideways.

All 100 banner blocks