HP.com Design System HP.com Design System

Layout Containers

Layout containers allow us to arrange other modular components within a responsive grid layout. 

Layout container components

Collapsible section

Hides and shows information within a collapsible section.

Column control

Allows authors to arrange other modular components within a pre-determined choice of column layouts, with a minimum of 2 and maximum of 5 columns.

Generic carousel

Groups up to 5 items, all using the same layout, into a paginated carousel. Can hold experiential or modular components.

Media & content component

Communicates a key point about a product, service, or solution. Includes a content section for titles, text, icons, and CTAs. The visual section of the component holds media, including images and videos.

Modal

Focuses customer attention on a specific task, such as a selecting a product. The modal window component is flexible and can hold other components in numerous layouts.

Grid container

Allows authors to arrange other modular components within a flexible grid system, where any combination of grid cell widths can be utilized.