Swatch deck fanning out
An offer card topped with a deck of colour swatches that fans out on hover or keyboard focus.
- Tailwind
- React
- CSS
- WordPress
Description
Five stacked swatch cards, slightly offset, pivot on their base to fan out as soon as the card is hovered or its link receives keyboard focus, then close again. Ideal for a hardware store, a paint shop, a decorator, a cosmetics brand or a product collection. Only the cards' rotation is animated, with no image or script, and the decoration is hidden from screen readers. AA contrast in light and dark mode. With prefers-reduced-motion the fan is open from the start, without movement.
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
“Live” badge
FreeA show card with a “Live” badge whose white dot sends out a continuously spreading ripple.
- Tailwind
- React
- CSS
- WordPress