HP.com Design System HP.com Design System

Content container

Content containers allow us to layer visual aids in the background of either an entire section or smaller section within a layout.

Content container components

Background container

The background container allows for either a transparent, colored, image, or video background, adding visual aid in the background of either an entire section or smaller section within a layout. 

Title & text

Key messages are more likely to be read when presented in a scannable, visually appealing manner. The title and text component allow us to place text and headings within a component, with the options drawn directly from the typography styles.

Foreground image

An image container is a modular component that holds images within a contained area and on top of the configured background image/color.

 

Hover to Ambient Effect  An option that can be added to an image component to play an ambient video on hover.

Multi-image

Multi-image container is a straightforward modular component that houses multiple foreground images within pagination controls.

Video

A video container is used to hold an ambient video or video teaser. Video teasers may be ambient or static. Full videos with sound open and play in a modal window.

Audio player

Embeds audio from an external source so that the user doesn’t have to leave HP.com. Can be used as a simple audio player or with supporting visuals.