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

Basic Sticky

The basic sticky nav is used to present a product or service title and one or two, always visible, CTAs.

HP Instant Ink

HP Instant Ink

Find reseller

Shop

Usage

Use this component to show a product or service title and CTAs in an ever-present sticky module. This module is always placed below the hero module. and will replace the secondary nav on scroll.

Module specifications

  • Copy and background colors are configurable
  • Option to disable sticky functionality
  • Mobile title style is configurable
  • Recommend two buttons, max 3
  • Recommend only 1 primary button

Character counts (with spaces)

Module headline - 80 max characters

Example layouts

Arabic

Title and multiple buttons

No title, multiple buttons / left align

No title, multiple buttons / center align

No title, multiple buttons / right align

Large mobile font size (font-style-H1)
When space between title and dropdown is less than 20px, the title and dropdown stays in one single line. 

Medium mobile font size (font-style-H4)

Small mobile font size (font-style-H6)

Title, multiple buttons

Title, dropdown button

No title, multiple buttons

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.