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

Multiple viewports

Use this component to utilize more than one component per viewport. (Example: Use the Data table on Desktop, but use the Grid container on Tablet and Mobile views, to customize how your content stacks)

This desktop view is configured using a Data table component. Switch your browser width to see different configurations.

Biocompatibility testing and results for HP 3D printing materials

.id { background: #bdfbdd !important; background-origin: border-box !important; }

Test standards

.id { background: #bdfbdd !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #bdfbdd !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; border-color: transparent; }

Material :

HP 3D HR

PA 12

.id { background: #bdfbdd !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; border-color: transparent; }

Material :
HP 3D HR
PA 11

.id { background: #bdfbdd !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; border-color: transparent; }

Material :
BASF
Ultrasint® TPU

.id { background: #bdfbdd !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; border-color: transparent; }

Material :
ESTANE® 3D
TPU M95A

.id { background: #bdfbdd !important; background-origin: border-box !important; }

Material :
HP 3D HR PP
enabled by BASF

.id { background: #eefef6 !important; background-origin: border-box !important; }

Cytotoxicity

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 100993-5)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

Sensitization

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 100993-10)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

Irritation/ intracutaneous

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 100993-10)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

Acute systemic toxicity

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 100993-11)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

Pyrogenicity

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(USP-151)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

Systemic toxicity

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 100993-11)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

.id { background: #eefef6 !important; background-origin: border-box !important; }

Implantation

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 10993-6)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

Muscle implantation

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(USP-88)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

Hemolysis

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 100993-4)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

Genotoxicity

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

(ISO 100993-3)

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; border-width: 0 1px 0 0 !important; border-style: solid; }

N/A*

.id { background: #eefef6 !important; background-origin: border-box !important; }

N/A*

Usage

The multiple viewports component is a 'super' component, built to combine different components for different breakpoints. For instance, you can have a data table for the desktop view, but switch to a grid container for the tablet and mobile views, allowing the author to have more control over how information stacks and reads. It also gives you the option to 'Show more' content, so you aren't presenting the user with a large scroll unless they are truly interested in reviewing the information.

Module specifications

Option to combine different components per breakpoint
Breakpoints can inherit configurations, or be authored seperately per breakpoint for maximum flexibility
Module specifications for each individual component will apply

Character counts (with spaces)

Character counts for each individual component will apply

Example layout 1

Data table (Desktop)

Grid Container (Tablet)

Grid Container (Mobile)

Example layout 2

Data table (Desktop)

Grid Container (Tablet)

Grid Container (Mobile)

Example layout 3

Data table (Desktop)

Grid Container (Tablet)

Grid Container (Mobile)

Top row can be sticky for clearer column viewing

Resources

For Zeplin access contact the UX Design Manager