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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3
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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3
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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3
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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3
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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3
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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3
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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
USB 3.2 Gen 2 Type-C™ with Thunderbolt™ 3
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
-
AC Power
-
HDMI 2.0
-
Audio combo jack
-
MicroSD reader
-
Webcam Kill Switch
-
USB 3.2 Gen 2 Type-A
-
USB 3.2 Gen 2 Type-C™
-
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
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.