An interactive component intended to showcase product features and benefits which dynamically reveals nested image content on scroll for a compelling and modern user experience.
The C097 allows editors to author a section heading with optional eyebrow label and body copy, and highlight 2–8 product features, benefits or proof-points. Each item includes its own optional eyebrow label, subheading, descriptive body copy and relevant, visually engaging image asset. The image position sticks on scroll and follows the user down the page, dynamically transitioning between images of each item as the given item is scrolled into view and becomes the focus of the page for that moment.
**Note: Image content used for this component should display on a transparent background within the asset to promote optimal visual display as intended. Do not include in-situ imagery with clipped background content (e.g. software shown on computer on a desk/in an office setting).
On scroll, component cycles between which image is displayed based on the scroll position of the associated item content relative to the viewable content area of the device viewport.
Component is intended to overview software or product feature content and does not include CTAs. However, if necessary, component or item body copy can include hyperlinks driving to relevant supporting content or child pages on click.
Section Eyebrow: 45
Heading Text: 80
Body Copy: 300
Item Eyebrow: 45
Item Subheading Text: 100
Item Body Copy: 300
Asset Size: 1024px x 1024px
Aspect Ratio: 1:1
Recommended File Weight: <75kb
Width: 680px
Height: 680px
Desktop: 1:1
Tablet: 1:1
Mobile: 1:1