Siirry sisältöön

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
Heading level 5 bold

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.
  1. 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.
  2. Aliquam ut orci sapien.
  3. Pellentesque fermentum porta nibh tincidunt congue.
    1. Curabitur dignissim purus eget eleifend ultrices.
    2. Aliquam quis tellus orci.
    3. Fusce dictum sodales bibendum.
  4. Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
  5. 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

  1. 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.
  2. 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.
  3. Pellentesque fermentum porta nibh tincidunt congue.
    1. Curabitur dignissim purus eget eleifend ultrices.
    2. Aliquam quis tellus orci.
    3. Fusce dictum sodales bibendum.
  4. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Checklist

  1. 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.
  2. 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.
  3. Pellentesque fermentum porta nibh tincidunt congue.
    1. Curabitur dignissim purus eget eleifend ultrices.
    2. Aliquam quis tellus orci.
    3. Fusce dictum sodales bibendum.
  4. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.

Header section

Buttons

Styles — Default (Fill), Outline, Text

With Arrow — toggle works with every style

Sizes — S, M, L

Colors — Accent (default) and Secondary (navy)

Secondary color + Arrow combinations

Width options

Disabled

Legacy — is-style-text-with-arrow (backward compat)

Group block

Glass Panel style

Use is-style-glass-panel on a Group block inside a Cover block. The default style gives the darker glass look, and you can switch the Group background to the Glass Light gradient for the lighter variant.

Default glass panel

Blurred panel inside a cover block

The block style handles blur, border, highlight, radius, and shadow. Keep the Group transparent and let the style provide the default dark glass effect.

Default glass panel

Blurred panel inside a cover block

The block style handles blur, border, highlight, radius, and shadow. Keep the Group transparent and let the style provide the default dark glass effect.

Glass Light gradient variant

Apply the Glass Light background gradient on the same Group style when you want the brighter panel treatment from the second Figma example.

Gradient background

Group block

Row variation

Row variation

Row variation – centered

Row variation – centered

Stack variation

Stack variation

Stack variation – centered

Stack variation – centered

Grid variation

Grid variation

Grid variation

Grid variation

Columns block

Column

Column

Column

Column

Column

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.

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

Left aligned
Right aligned
Center aligned
Wide width
Full width
Rounded

Embed Videos

Local embed video
YouTube embed
Vimeo video

Tables

INTERNAL
MODULES
EXTERNAL
MODULES
UNITRANGE (3RESOLUTIONACCURACY (1 (±)1 YEAR UNCERTAINTY (±) (2
PBEXT BkPa 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
P10mDEXT10mDkPa diff
mbar diff
iwc diff
±1
±10
±4
0.01
0.1
0.001
0.05% Span0.05% Span + 0.1% RDG
P100mEXT100mkPa
mbar
iwc
0 to 10
0 to 100
0 to 40
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P400mCEXT400mCkPa
mbar
iwc
±40
±400
±160
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P1CEXT1CkPa
bar
psi
±100
±1
–14.5 to 15
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P2CEXT2CkPa
bar
psi
–100 to 200
–1 to 2
–14.5 to 30
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P6CEXT6CkPa
bar
psi
–100 to 600
–1 to 6
–14.5 to 90
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
INTERNAL
MODULES
EXTERNAL
MODULES
UNITRANGE (3RESOLUTIONACCURACY (1 (±)1 YEAR UNCERTAINTY (±) (2
PBEXT BkPa 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
P10mDEXT10mDkPa diff
mbar diff
iwc diff
±1
±10
±4
0.01
0.1
0.001
0.05% Span0.05% Span + 0.1% RDG
P100mEXT100mkPa
mbar
iwc
0 to 10
0 to 100
0 to 40
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P400mCEXT400mCkPa
mbar
iwc
±40
±400
±160
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P1CEXT1CkPa
bar
psi
±100
±1
–14.5 to 15
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P2CEXT2CkPa
bar
psi
–100 to 200
–1 to 2
–14.5 to 30
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
P6CEXT6CkPa
bar
psi
–100 to 600
–1 to 6
–14.5 to 90
0.01
0.1
0.001
0.015% FS + 0.0125% RDG0.05% Span + 0.1% RDG
EXTERNAL
MODULES
UNITRANGE (3
EXT BkPa a70 to 120
EXT10mDkPa±1
EXT100mkPa0 to 10
EXT400mCkPa±40
EXT1CkPa±100
EXT2CkPa–100 to 200
EXT6CkPa–100 to 600
Footer labelFooter labelFooter 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

Logos gallery style

Icon carousel

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.

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.

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.

Media Card

Heading

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

Heading that wraps multiple lines

For services we provide equipment services.

Heading

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

Heading

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

Details

Summary

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

Summary

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

Summary

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

Accordions

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

For services we provide equipment services for calibrators and various software related services from process consultancy to on-boarding support.

File

Share button

Page title

Demo blocks

Post fields

Demo blocks

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…

Lue lisää: Demo blocks

Search form

Query loop

Post teaser

Call to action

Window Shadow style

Use is-style-window-shadow on Image and Media & Text blocks when you want the framed surface with the soft window-shadow treatment.

Media & Text style

Media & Text with Window Shadow

The style applies the same framed image treatment to the media area, so the visual effect is reusable outside the material cards as well.

Image style

Material query loop