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*

This tablet view is configured using a Grid component. Switch your browser width to see different configurations.

Biocompatibility testing and results for HP 3d printing materials

Test standards:
Cytotoxicity (ISO 100993-5)

3D Printing Material:

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU

ESTANE® 3D TPU M95A

HP 3D HR PPenabled by BASF

Test standards:
Sensitization (ISO 100993-10)

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU

ESTANE® 3D TPU M95A

HP 3D HR PPenabled by BASF

Test standards:
Irritation/intracutaneous (ISO 100993-10)

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU

ESTANE® 3D TPU M95A

HP 3D HR PPenabled by BASF

Test standards:
Acute systemic toxicity (ISO 100993-11)

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU
N/A*

ESTANE® 3D TPU M95A
N/A*

HP 3D HR PPenabled by BASF

Show more

This mobile view is configured using a Grid component. Switch your browser width to see different configurations.

Biocompatibility testing and results for HP 3d printing materials

Test standards:
Cytotoxicity (ISO 100993-5)

3D Printing Material:

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU

ESTANE® 3D TPU M95A

HP 3D HR PPenabled
by BASF

Test standards:
Sensitization (ISO 100993-10)

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU

ESTANE® 3D TPU M95A

HP 3D HR PPenabled
by BASF

Test standards:
Irritation/intracutaneous (ISO 100993-10)

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU

ESTANE® 3D TPU M95A

HP 3D HR PPenabled
by BASF

Test standards:
Acute systemic toxicity (ISO 100993-11)

HP 3D HR PA 11

HP 3D HR PA 12

BASF Ultrasint® TPU
N/A*

ESTANE® 3D TPU M95A
N/A*

HP 3D HR PPenabled
by BASF

Show more

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

Reference

For Zeplin access contact the UX Design Manager

Use relevant individual components