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

Download