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

Download