Skip to content
UI Kit
Accent color

Sale banners and promotions

Flash sales with a countdown, deals with stock bars, timed drops and product badges for new, sale and limited.

2 components · 8 variants
Switch category

Urgency that stays honest

A sale works when visitors see at once what is reduced, for how long and how much is left. The two components here bring a ticking countdown, stock bars and clear badges, and after a sale ends the copy says when the next deals start.

Flash sale comes as a countdown banner on a dark band, a deal grid whose claimed bars fill on scroll and turn warm from 80 percent, one deal of the day with a ring that empties with the time left and a quantity capped per customer, and timed drops as tabs with a reminder for later slots. Product badges mark new, sale, sustainable, limited, bestseller and rating, on product cards in fixed places, explained with the proof behind each badge, as drawn stickers for campaign pictures or as filters above a grid.

Let a countdown run toward a real end, an honest clock brings customers back for the next sale. Keep at most two status badges per card so the grid stays calm, and explain badges like sustainable wherever a claim deserves proof. The deal grid suits a sale week, the deal of the day a single highlight.

flash-sale

Flash sale

A sale with a ticking clock and stock that runs low. A banner, a deal grid, a deal of the day and timed drops with a reminder.

Props and details · Flash sale

Countdown bannerNew in 1.2

A dark band with drifting light, the countdown in large digits that roll on every second and one call to action. After the end it says when the next deals start.

Deal gridNew in 1.2

Four deals with the clock in the header. Each card has a claimed bar that fills on scroll, turns warm from 80 percent with the pieces left and greys out the card when sold out.

Deal of the dayNew in 1.2

One product large with a ring on its corner that empties with the time left. Price, saving, the ticking clock, the stock bar and a quantity capped at the limit per customer.

Timed dropsNew in 1.2

The time slots of a day as tabs with arrow keys, the live one with a pulsing dot. Its deals can be bought, later slots show a blurred first look and take an email for a reminder.

product-badges

Product badges

Badges for new, sale, sustainable, limited, bestseller and rating. On cards, explained, as drawn stickers or as filters.

Props and details · Product badges

On product cardsNew in 1.2

Fixed places keep a grid calm. Status badges stack top left (two at most), the rating sits top right and sustainability at the foot of the picture. Each kind has its own quiet color.

ExplainedNew in 1.2

On a product page every badge opens a short explanation with the proof behind it. One opens at a time, Escape and a click outside close it, focus goes back to the badge.

StickersNew in 1.2

Drawn stickers for campaign pictures. A slowly turning sale burst, a ring whose text runs around the edge, a corner ribbon for new pieces and a stamp for sustainable ones.

As filtersNew in 1.2

The badges as toggles above a grid, several at once. Each counts what it would leave, empty choices step back, the grid rebuilds with a short rise and a clear text when nothing fits.

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Sales and promotions on a page.

Often searched

Jump to

Copied to the clipboard