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

Media & content component

This component is used to communicate a key point about a product, service, or solution.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Usage

This component includes a content section for titles, text, icons, and CTAs. The visual section of the component holds media, including images and videos.

Module specifications

The height of the module is determined by the height of the image
The media and content component module will grow as content reaches 40px to 40px padding top and bottom of the content space
Default padding recommendation is 60px by 60px from top, left, right, or bottom edges.

Character counts (with spaces)

This is one of the few components that does not have a character limit, however we do ask that marketing use best-practices in keeping copy short, concise and consumer-facing to keep reader's attention.

Example layouts

With icons and CTA's. The height of the image (586px here) dictates the height of the module

This is an example of a vertical split. The image will not take up 100% of the viewport, aligned to the max grid width (viewport height minus the left and right margin for viewport bigger than 1280px)

TABLET

MOBILE

70/30 content to image ratio/image to content ratio. Due to the 70/30 ratio, the content/image will NOT align to the grid, but the text field width is based on the grid column. Content column and media column is aligned to the margin, not to the border of the browser for 1280+px viewport, 30px both sides.

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.