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

1

High-tech style

Stunning looks meet jaw-dropping performance.
2

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

Reference

For Zeplin access contact the UX Design Manager

Download