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
Konstantin Nikolaev
