Floating Highlights (alonepro/floating-highlights)
The Floating Highlights block combines a primary visual subject (such as a portrait of a field volunteer or community leader) with multiple floating cards that cycle smoothly in and out of view. This delivers an engaging, dynamic hero or impact presentation without overwhelming visitors.
Key Features
- Badge Group Rotation: Create multiple sets of highlight badges that rotate sequentially based on a configurable timer.
- Configurable Direction: Badges slide into place from either the left (
slide-left) or right (slide-right). - Customizable Aspect Ratios: Choose from predefined aspect ratios (
1/1,4/5,16/9) to fit various portrait or landscape photography formats.
Configuration Guide
1. Main Visual Asset
- Upload or select a high-resolution image in the block inspector.
- Select your desired Image Aspect Ratio (default is
1/1square). - Provide meaningful alt text for accessibility.
2. Highlight Sets (Repeater)
In the inspector, expand the Highlight Sets section:
- Each set can contain multiple metric badges.
- For each badge, specify:
- Number / Value: The headline stat (e.g.
150K,100%). - Title / Label: Short description (e.g.
Children Vaccinated). - Icon: Choose an icon representing the metric.
- Number / Value: The headline stat (e.g.
Block Inspector Settings
| Setting | Type | Default | Description |
|---|---|---|---|
imageAspectRatio | String | "1/1" | Aspect ratio applied to the background image container. |
highlightSets | Array | [] | Nested array containing groups of badge items. |
rotationInterval | Number | 4000 | Time in milliseconds before cycling to the next badge set. |
slideDirection | Select | "slide-right" | Animation vector: slide-right or slide-left. |
enableScrollAnimation | Toggle | true | Viewport-triggered entrance animation via GSAP. |