HP.com Design System HP.com Design System HP.com Design System

Scrolling Ambient Video

A compelling way to overlay text onto a visually powerful background video.

hp

HP OmniBook X Next Gen AI PCs

Game changing AI experiences

Seamless and genuine connections

Built with the planet in mind

Usage

A compelling way to show messaging while using the visual power of a background video. 

Module specifications

  • Two versions available: 
    • Scroll into place - Starts out with a smaller video with a headline at the top, and scrolling grows the video to fullscreen then reveals overlaying text
    • Fullscreen - Starts with fullscreen video, and scrolling reveals overlaying text
  • Does not accomodate CTAs
  • Background color is configurable
  • Icon can be configured above headline
  • Text can be set to reveal on scroll or stay static
  • Please follow standard video size recommendations

Character counts (with spaces)

  • No character limits but below are recommendations
    • Module headline - 50 max characters
    • Module subhead - 100 max characters
    • Module (callout) body copy - 120 max characters
    • Maximum of 4 callouts (not including headline)

Example layouts

Scroll into place version - 1920

Full Screen version - 1920

Tablet /mobile

Mobile variation

Resources

Zeplin

If you need Zeplin access contact the UX Design Manager

Figma

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.