Solution Highlight

Pattern Documentation

Theme Modifiers (CSS, Javascript)

This pattern styling is affected by modifiers; see the Kadence Build Strategy Documentation.

Here are the classes that affect this pattern:

• vertical-scroll-section: JS looks for patterns with this class to handle pinning the pattern
• scroll-column: JS uses this class to be aware of how long to keep the pattern pinned as the user scrolls its length
• pin-column: minor styling added to adjust the height and layout of the non-scrolled column

This pattern utilizes the GSAP JS library to handle pinning the pattern container element, allowing the user to scroll the length of the column with class “scroll-column”.

Kadence Modification Notes

• Container Row Block
  • Renamed “Solution Highlight”
  • 2 Columns, 60/40% (desktop & tablet), stacked for mobile
  • Column Gutter: LG (desktop/tablet), n/a (mobile)
  • Row Gutter: None (desktop/tablet), 48px (mobile)
  • Background Video: Mute video, Loop video, Show play/pause buttons
  • Padding: None (desktop/tablet), 80px (mobile)
• Left Section Block
  • “pin-column” class added
  • Vertical Gap: 60px (desktop), LG (tablet/mobile)
  • Padding: LG (desktop/tablet), None (mobile)
• Right Section Block (longer scrollable content column)
  • “scroll-column” class added
  • Alignment: End
  • Padding: 75vh (top desktop/tablet), 25vh (bottom desktop/tablet), 0px (top/bottom mobile)
    • Adjust top padding in ‘vh’ units to adjust how far down content appears upon first scrolling to the pattern. Higher value = more out of view, lower value = more in view
• Row Block inside scroll column
  • Custom content max width: 420px (desktop/tablet), 800px (mobile)

Pattern Library Organization

• Categories: n/a
• Search Keywords: scroll, solution highlight, sticky scroll, vertical scroll