HP.com Design System HP.com Design System

KSP carousel

This component is an image carousel navigated by icons/copy blocks below.

Recycled materials. Less Packaging.

  • Laminated structures with Water Base (WB) or Solvent Base (SB) lamination
  • Surface printed structures or paper with Water Base (WB)  or Electron Beam (EB) over-print varnish

Reducing greenhouse gases

  • Surface printed Polyethylene (PE), Polypropylene (PP) or paper with Electron Beam (EB) or Water Base (WB) over-print varnish

Learn

Safer materials

  • All-PE structures with Solvent-less (SL), Thermal, Water Base (WB) and Solvent Base (SB) lamination

Learn

Top EPEAT certifications

  • EPEAT® is the world’s most stringent and comprehensive measure of product sustainability, and we are proud to offer a full portfolio of EPEAT® Gold and Silver devices. 

Usage

This module highlights features with a smooth, clickable, carousel navigation experience.

Module specifications

  • Background color, text, and UI element colors are configurable
  • Option to auto rotate
  • Option for CTA below text boxes
  • Accomodates static and mp4 video content (not youtube)
  • Icons are optional
  • Icons must be uploaded as SVG
  • Icons size: 60x60px
  • If being used inside a background container, ensure that the container's width is set to no limit 

Character counts (with spaces)

  • Section title - 30 max characters
  • Body copy - 80 max characters

Example layouts

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

Dark background with icons and CTAs

Default Tablet

Default Mobile

Tablet and mobile variations. On smaller screen widths, carousel columns will flow oustide of viewport, and arrows/pagination appears.

Resources

Reference

For Zeplin access contact the UX Design Manager

Download