HP.com Design System HP.com Design System

Our pages are crafted with a series of modular and experiential components that can be configured in a mulititude of ways to create clean, beautiful and consistent pages across HP.com

Modular components

Modular components are building blocks that enable the construction of flexible layouts.

Interactive elements

These are elements that individuals can interact with including CTA buttons, links, dropdowns, utility buttons, and input elements.

Content containers

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

Layout containers

Modular components that allow us to arrange other modular components within a responsive grid layout.

Input elements

Basic elements that are components of other modules such as forms, faceted search, etc.

*These elements are not used on their own, but as part of existing components. They will be updated as the components are updated.

Global header and footer

The global header and footer are required components on every page of the hp.com domain.

Experiential components

Experiential components are carefully crafted reusable modules that can be placed within a page.

Secondary navigation

Secondary navigation components appear consistently on all pages within a section of the website. They facilitate rapid learning and intuitive exploration of a product, solution, or topic.

Anchor navigation

Helps users navigate up and down through different sections within a webpage.

Basic sticky

Presents one or two, always visible CTAs within a page.

Countdown timer

Presents a visual cue to a product or service launch.

Faceted search

A sorting tool to help customers narrow down a large list of resources, products or services.

Feature focus

A module that allows a user to view a specific feature or part of a product in digestible increments.

Highlighted CTA

Use the highlighted CTA to call attention to a service, resource, solution or contact information.

KSP carousel

A module used to demonstrate up to four key selling points of a product, family of products, service or solution with a carousel.

Data table

Houses multiple table formats for detailed yet scannable information.

Large card slider

This carousel displays a stepped sequence showcasing a highlighted features of a product, solution, or service.

Performance comparison

This module is used to compare 2-3 sets of product specifications across multiple models.

Port viewer

Used to highlight the various ports on a product or family of products.

Product module

A container that holds a group of product or service tiles in a carousel or grid for easy visual and feature comparison.

Use case drawer

Features 2-3 personas or use case examples showcasing why a product or service is right for a target customer.

Vertical content switcher

Presents a single key point with multiple supporting points as an interactive set of hide/show captions and visual aids.

Audio player

Embeds audio from an external source so that the user doesn’t have to leave HP.com.

Horizontal content switcher

Presents a single key point with multiple supporting points as an interactive set of hide/show captions and visual aids in a horizontal fashion.

Use case cards

Similar to the Use Case Drawer, but can be used as seperate cards vs in one contained module.

Custom info banner

This component combines a large image with multiple levels of text content.

Small info banner

A small multi-use container that can display two layers of related content.

Step-by-step

The module supports key information by presenting proof points in a memorable stepped format.

Statistics drawer

An interactive drawer module that showcases large statistics copy as well as detail copy and images to support.

Product magnifier

A module that allows you to highlight multiple angles of a product by smoothly scrolling through a series of images and callouts.

Model viewer

A module that allows the user to pinch, zoom and spin a product, as well as clicking on hotspots to reveal specific content.

In-page navigation

An elegant alternative to standard tabs.

Back-to-top Button

This module, when added to a page, allows users to scroll back to the top of the page.

Resolution module

An interactive module that helps users compare product resolutions side by side and explore specific areas of interest.

Compare table

Compare table provides a comprehensive chart that identifies key features in a product and compares it to peers and or competitors.

Product view card

The Product View Card introduces a product with quick labels and a slideshow.

Basic tabs

Enables the user to toggle between content placed in the section below.

Content Accordion

Content accordion provides an alternative interactive 'switching' experience that toggles through image and text.

Visual Tabs

The visual tabs could feature 3 categories with nesting capabilities.

Category Hotspots

Category hotspots is an informative tool that displays exciting new features by organizing them into categories.

Multiple Viewports

A 'super' component that allows you to use a different component at each breakpoint.

NEW

Scroll Reveal

A clear and simple way to add subtle movement to pages.

NEW

Click to Shop

Making shopping a more inspirational experience.

NEW

Horizontal Scrolling

A component the assists users in getting through carousel content by locking it into a scroll.

NEW

Paralax lite

An authorable system for powerful paralax motion.

NEW

Pop-up banner

An attention grabbing violater that can pin to the top or the bottom of a page.

COMING SOON

Scrolling Ambient Video

A compelling way to show product info while using the visual power of background video.