HP.com Design System HP.com Design System

Port Viewer

The port viewer showcase port/ports of the left and right side of a product.

Packed with ports

Ut enim ad minim veniam, quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea

Packed with ports

Ut enim ad minim veniam, quis nostrud exer citation ullamco laboris nisi ut aliquip ex ea

  1. AC Power
  2. HDMI 2.0
  3. Audio combo jack
  1. MicroSD reader
  2. Webcam Kill Switch
  3. USB 3.2 Gen 2 Type-A
  4. USB 3.2 Gen 2 Type-C™
  5. USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3

Usage

The port viewer module is used to highlight the various ports on a product or family of products. This module is currently only used on laptop pages.

Module specifications    

  • The background color is set to grey to comply with brand guidelines for all product-related content  
  • Option for outlined (default) or solid model buttons
  • The name of the ports should be concise and easy to scan for the user. 

Character counts

  • Port name - not set, but recommended 100 characters max
  • Port description - not set, but recommended 100 character max

Example layouts

Default Desktop

Default Tablet

Default Mobile

Mobile variations. Model tabs will trail off page, user can swipe to see all.

Resources

Reference

For Zeplin access contact the UX Design Manager

Export Guide

Download