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

Custom Info Banner

This component combines a large image with multiple levels of text content.

HP Spectre

Near-borderless display

Near-borderless display

HP's most powerful Spectre converible yet looks stunning and runs smooth with a jaw-dropping high definition, near-borderless display and long battery life that takes you from day to night. 

Jaw-dropping high definition

Long battery life

HP's most powerful Spectre

View all Laptops

Compare series

Intel i9 lorem ipsum dolar sit amet

Usage

This component allows users to display a large product or lifestyle asset overlaid by copy and CTAs at varying levels.

Module specifications

  • Feature visual is mandatory and can support static image or video
  • Component background is configurable
  • Support lists in bullet form or with dividers
  • 2 CTAs max
  • Badges optional
  • Title, subtitle, and body copy is optional
  • Module's decorative lines available in white or black
  • Available in multiple layout configurations in these two main categories: Bisected or Full bleed 

Character counts (with spaces)

  • Component headline - 30 max characters
  • Component subtitle - 80 max characters
  • Supporting copy - 360 max characters

Example layout

Bisect layout in a monochromatic color scheme

Default Tablet

Default Mobile

Default Tablet

Default Mobile

Bisect layout in solid color scheme

Default Tablet

Default Mobile

Full bleed image with top-aligned copy and transparent bar

Default Tablet

Default Mobile

Full bleed image with bottom-aligned copy and solid bars

Default Tablet

Default Mobile

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.