HP.com Design System 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.