Design system

Use this page to discover what’s available and copy-paste useful patterns.

Typography

Heading level 1

Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.

Heading level 2

Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.

Heading level 3

Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.

Heading level 3 spread
over two lines

Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.

Heading level 4

Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.

Heading level 5

Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.

Heading level 6

Large paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue. Curabitur dignissim purus eget eleifend ultrices. Aliquam quis tellus orci. Fusce dictum sodales bibendum. Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Medium/Default paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue. Curabitur dignissim purus eget eleifend ultrices. Aliquam quis tellus orci. Fusce dictum sodales bibendum. Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Small paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue. Curabitur dignissim purus eget eleifend ultrices. Aliquam quis tellus orci. Fusce dictum sodales bibendum. Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
Aliquam ut orci sapien.
Pellentesque fermentum porta nibh tincidunt congue.
- Curabitur dignissim purus eget eleifend ultrices.
- Aliquam quis tellus orci.
- Fusce dictum sodales bibendum.
Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
Aliquam ut orci sapien.
Pellentesque fermentum porta nibh tincidunt congue.
1. Curabitur dignissim purus eget eleifend ultrices.
2. Aliquam quis tellus orci.
3. Fusce dictum sodales bibendum.
Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Spacious bullet list style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
- Aliquam quis tellus orci.
- Fusce dictum sodales bibendum.
Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.

Spacious numbered list style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
Pellentesque fermentum porta nibh tincidunt congue.
1. Curabitur dignissim purus eget eleifend ultrices.
2. Aliquam quis tellus orci.
3. Fusce dictum sodales bibendum.
Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Buttons

Button sizing

Horizontal buttons

Centered horizontal buttons

Vertical buttons

On top of background colors

Group block

Row variation

Row variation – centered

Stack variation

Stack variation – centered

Grid variation

Columns block

Column

Links

Inline links on light background

Normal

The seasons this is a link greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.

Disabled

The seasons ~~this is a link~~ greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.

Inline links on dark background

Normal

The seasons this is a link greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.

Disabled

The seasons ~~this is a link~~ greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.

Quote

Quote desktop – But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth.
Author of quote

Pullquote

Quote desktop – But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth.
Author of quote

Image blocks

Embed Videos

Local embed video

Vimeo video

Tables

INTERNAL MODULES	EXTERNAL MODULES	UNIT	RANGE⁽³	RESOLUTION	ACCURACY ⁽¹(±)	1 YEAR UNCERTAINTY (±) ⁽²
PB	EXT B	kPa a mbar a psi a	70 to 120 700 to 1200 10.15 to 17.4	0.01 0.1 0.001	0.03 kPa 0.3 mbar 0.0044 psi	0.05 kPa 0.5 mbar 0.0073 psi
P10mD	EXT10mD	kPa diff mbar diff iwc diff	±1 ±10 ±4	0.01 0.1 0.001	0.05% Span	0.05% Span + 0.1% RDG
P100m	EXT100m	kPa mbar iwc	0 to 10 0 to 100 0 to 40	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P400mC	EXT400mC	kPa mbar iwc	±40 ±400 ±160	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P1C	EXT1C	kPa bar psi	±100 ±1 –14.5 to 15	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P2C	EXT2C	kPa bar psi	–100 to 200 –1 to 2 –14.5 to 30	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P6C	EXT6C	kPa bar psi	–100 to 600 –1 to 6 –14.5 to 90	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG

INTERNAL MODULES	EXTERNAL MODULES	UNIT	RANGE⁽³	RESOLUTION	ACCURACY ⁽¹(±)	1 YEAR UNCERTAINTY (±) ⁽²
PB	EXT B	kPa a mbar a psi a	70 to 120 700 to 1200 10.15 to 17.4	0.01 0.1 0.001	0.03 kPa 0.3 mbar 0.0044 psi	0.05 kPa 0.5 mbar 0.0073 psi
P10mD	EXT10mD	kPa diff mbar diff iwc diff	±1 ±10 ±4	0.01 0.1 0.001	0.05% Span	0.05% Span + 0.1% RDG
P100m	EXT100m	kPa mbar iwc	0 to 10 0 to 100 0 to 40	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P400mC	EXT400mC	kPa mbar iwc	±40 ±400 ±160	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P1C	EXT1C	kPa bar psi	±100 ±1 –14.5 to 15	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P2C	EXT2C	kPa bar psi	–100 to 200 –1 to 2 –14.5 to 30	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG
P6C	EXT6C	kPa bar psi	–100 to 600 –1 to 6 –14.5 to 90	0.01 0.1 0.001	0.015% FS + 0.0125% RDG	0.05% Span + 0.1% RDG

EXTERNAL MODULES	UNIT	RANGE⁽³
EXT B	kPa a	70 to 120
EXT10mD	kPa	±1
EXT100m	kPa	0 to 10
EXT400mC	kPa	±40
EXT1C	kPa	±100
EXT2C	kPa	–100 to 200
EXT6C	kPa	–100 to 600
Footer label	Footer label	Footer label

Table caption

Media & Text block

Designed for industrial use

MC6-T is designed for demanding industrial environments. It is designed to minimize the effects of varying environmental conditions, typical in process industry field conditions.

It is also designed to minimize the effects of any mains voltage fluctuations, and it remains very stable in spite of changes in AC mains power voltage.

Designed for industrial use

MC6-T is designed for demanding industrial environments. It is designed to minimize the effects of varying environmental conditions, typical in process industry field conditions.

It is also designed to minimize the effects of any mains voltage fluctuations, and it remains very stable in spite of changes in AC mains power voltage.

Designed for industrial use

MC6-T is designed for demanding industrial environments. It is designed to minimize the effects of varying environmental conditions, typical in process industry field conditions.

It is also designed to minimize the effects of any mains voltage fluctuations, and it remains very stable in spite of changes in AC mains power voltage.

Designed for industrial use

MC6-T is designed for demanding industrial environments. It is designed to minimize the effects of varying environmental conditions, typical in process industry field conditions.

It is also designed to minimize the effects of any mains voltage fluctuations, and it remains very stable in spite of changes in AC mains power voltage.

Designed for industrial use

MC6-T is designed for demanding industrial environments. It is designed to minimize the effects of varying environmental conditions, typical in process industry field conditions.

It is also designed to minimize the effects of any mains voltage fluctuations, and it remains very stable in spite of changes in AC mains power voltage.

Cover block

With overlay and text

Read our story, what kind of workplace we have and about our
customers. If you can’t find what you were looking for, feel free to
contact us.

Fixed background with align

Read our story, what kind of workplace we have and about our
customers. If you can’t find what you were looking for, feel free to
contact us.

Without overlay and text

Gallery block

Separators

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support. For updated education information on calibration, please see our calibration tips, white papers & eBooks and videos. For contacting us, please see the Worldwide Contacts page for contact information.