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

Large card slider

This component is a carousel/slider with copy in a card over images and/or videos.

Everything you want in a PC

High-tech style

Stunning looks meet jaw-dropping performance.

Creativity lorem ipsum dolar sit amet this is an example of longer and smaller description text lorem ipsum dolar sit amet. Creativity lorem ipsum dolar sit amet this is an example of longer and smaller description text lorem ipsum dolar sit amet.

Powerhouse laptops for creators on the move. Lorem ipsum dolar sit amet this is an example of longer and smaller description text lorem ipsum dolar sit amet. Lorem ipsum dolar sit amet this is an example of longer and smaller description text lorem ipsum dolar sit amet,Lorem ipsum dolar sit amet this is an example of longer and smaller description text lorem ipsum dolar sit amet,Lorem ipsum dolar sit amet this is an example of longer and smaller description text lorem ipsum dolar sit amet.

Usage

This module allows users to progressively discover multiple attributes of a product or feature

Module specifications

Option for headline or no headline
Option to hide numbers on cards
Option to autoplay
Option to align card content to middle
Background and text colors are configurable
Circle around number is optional
Supports static or mp4 video content (not youtube)
Recommend up to 5-6 cards, but there is no set maximum

Character counts (with spaces)

Description characters are unlimited (see second card example where longer text turns to a scroll) but recommended limit is between 300-400 characters combined for best readability.

Example layouts

Any colors from color palette can be used. Ensure color use is ADA complaint.

Desktop with title and description with circled numbers

Mobile with title and description with circled numbers

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.