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'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

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

For Zeplin access contact the UX Design Manager

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.