SlidingHighlightGrid

A highlight block glides between cards as the user hovers — never disappearing, always transitioning smoothly to the next. Built for editorial, portfolio, and marketing layouts where interaction needs to feel considered.

Interaction One highlight element slides to whichever card is active. An animated arrow appears on hover. Both move together in sync. All colors, sizes, and styles are fully configurable from the property panel.

Property Controls

Layout Columns (1–8), Rows (1–12), Card Height (Fill or Fixed px)

Alignment Horizontal (Left / Center / Right), Distribution (Start / Center / End / Space Between / Space Around / Space Evenly), Block Gap

Padding Global (all sides) or Custom (Top / Right / Bottom / Left)

Colors Background, Highlight Color

Border On/Off — Color

Arrow On/Off — Background Color, Icon Color

Overline On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color

Title On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color

Body On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color

Link Label On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color — animated underline on hover

Per Card Overline, Title, Body, Link URL, Link Label