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

Scroll Reveal

An authorable parameter we can apply to elements to make our pages feel less static and more engaging to scroll through

Packaging

The box is made from at least 90% recycled fibers and is 100% recyclable. We use fiber-based materials from recycled sources so it can easily go into your standard recycling bin.6

Usage

Add authorable parameters to text or images on an individual basis, creating subtle motion on page load.

Module specifications

  • Default presets are in place for authors but can be altered
  • Direction, delay, duration and offset can be configured
  • Motion consists of left, right, up, down, and fade
  • Animations only happen once (on load) vs over and over
  • Use sparingly and subtly on a page
  • Text and static images only

Character counts (with spaces)

Since this is just a set of motion parameters, there are no character counts. However when placing text boxes within this component, please use best-practices in keeping copy short, concise and consumer-facing to keep reader's attention.

Example layouts

Sustainable design leading the way

The HP 23.8”/27” All-in-One Desktop is recognized at CES 2024 for its innovation, engineering and functionality, aesthetic and design.1

Learn

Built to game, made to create

With the unbelievably portable, ultra vibrant, high-performing OMEN Transcend 14, you no longer need to choose between your craft and gaming passion. Get the one that does it all, and also games​.

Learn

Built to game, made to create

With the unbelievably portable, ultra vibrant, high-performing OMEN Transcend 14, you no longer need to choose between your craft and gaming passion. Get the one that does it all, and also games​.

Learn

Resources

Reference

For 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.