“Live” badge
A show card with a “Live” badge whose white dot sends out a continuously spreading ripple.
- Tailwind
- React
- CSS
- WordPress
Description
The red “Live” badge carries a white dot from which a ripple grows and fades every second and a half, the familiar sign of an ongoing broadcast. Ideal for a radio station, a live video, a match, an auction or an online event. The label remains real text, only the ripple is animated (size and opacity), with no image or script, and it is hidden from screen readers. AA contrast in light and dark mode. With prefers-reduced-motion the dot stays still, without a ripple.
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
A product card crossed at the corner by a discount ribbon over which a glint of light sweeps.
- 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