Shining promo ribbon
A product card crossed at the corner by a discount ribbon over which a glint of light sweeps.
- Tailwind
- React
- CSS
- WordPress
Description
A red ribbon set diagonally in the card's corner announces the discount, and a glint of light sweeps across it three times after the page shows to catch the eye, then stops so as not to distract from reading. The struck-through and new prices remain real text. Ideal for a promotion, a sale, a product of the moment or a limited offer. Only the glint's position is animated, with no image or script, AA contrast in light and dark mode. With prefers-reduced-motion the ribbon is shown without the glint.
Code
Loading the code…
In the same spirit
A large heading in hollow letters where each word fills with colour from left to right, one after another.
- Tailwind
- React
- CSS
- WordPress
An integrations pitch where seven icons slowly circle a logo on two orbits.
- Tailwind
- React
- CSS
- WordPress
An offer card topped with a deck of colour swatches that fans out on hover or keyboard focus.
- Tailwind
- React
- CSS
- WordPress
“Live” badge
FreeA show card with a “Live” badge whose white dot sends out a continuously spreading ripple.
- Tailwind
- React
- CSS
- WordPress