Spacing & Layout

Spacing System

Spacing for components and typography uses increments of 4 pixels. Typography doesn’t use a traditional baseline grid. Instead, line heights are set in increments of 4 px and spacing is measured from the edges of the text box.

Spacing Scale

Use the spacing scale for components or sections. It uses small increments in order to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all components and sections. Spacing available in the system:

  • 0px
  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
  • 128px

You can apply the spacing to your components and sections by adding following spacing classes.

Spacing Classes

To apply the spacing to an element add a class name related to a specific measurement. Class names for spacing are constructed like this: S P T 32 (Spacing Padding Top Value) or S M T 32 (Spacing Margin Top Value).

Check the examples below to learn how to use spacing classes for different breakpoints.

Examples of Padding Classes

Desktop and below:

  • S P 32 (Spacing Padding Value)
  • S P Y 32 (Spacing Padding Y Axis Value)
  • S P X 32 (Spacing Padding X Axis Value)
  • S P T 32 (Spacing Padding Top Value)
  • S P R 32 (Spacing Padding Right Value)
  • S P B 32 (Spacing Padding Bottom Value)
  • S P L 32 (Spacing Padding Left Value)

Tablet and below:

  • ST P 32 (Spacing Padding Value)
  • ST P Y 32 (Spacing Padding Y Axis Value)
  • ST P X 32 (Spacing Padding X Axis Value)
  • ST P T 32 (Spacing Padding Top Value)
  • ST P R 32 (Spacing Padding Right Value)
  • ST P B 32 (Spacing Padding Bottom Value)
  • ST P L 32 (Spacing Padding Left Value)

Mobile Landscape (Horizontal) and below:

  • SH P 32 (Spacing Padding Value)
  • SH P Y 32 (Spacing Padding Y Axis Value)
  • SH P X 32 (Spacing Padding X Axis Value)
  • SH P T 32 (Spacing Padding Top Value)
  • SH P R 32 (Spacing Padding Right Value)
  • SH P B 32 (Spacing Padding Bottom Value)
  • SH P L 32 (Spacing Padding Left Value)

Mobile:

  • SM P 32 (Spacing Padding Value)
  • SM P Y 32 (Spacing Padding Y Axis Value)
  • SM P X 32 (Spacing Padding X Axis Value)
  • SM P T 32 (Spacing Padding Top Value)
  • SM P R 32 (Spacing Padding Right Value)
  • SM P B 32 (Spacing Padding Bottom Value)
  • SM P L 32 (Spacing Padding Left Value)

Examples of Margin Classes

Desktop and below:

  • S M 32 (Spacing Margin Value)
  • S M Y 32 (Spacing Margin Y Axis Value)
  • S M X 32 (Spacing Margin X Axis Value)
  • S M T 32 (Spacing Margin Top Value)
  • S M R 32 (Spacing Margin Right Value)
  • S M B 32 (Spacing Margin Bottom Value)
  • S M L 32 (Spacing Margin Left Value)

Tablet and below:

  • ST M 32 (Spacing Margin Value)
  • ST M Y 32 (Spacing Margin Y Axis Value)
  • ST M X 32 (Spacing Margin X Axis Value)
  • ST M T 32 (Spacing Margin Top Value)
  • ST M R 32 (Spacing Margin Right Value)
  • ST M B 32 (Spacing Margin Bottom Value)
  • ST M L 32 (Spacing Margin Left Value)

Mobile Landscape (Horizontal) and below:

  • SH M 32 (Spacing Margin Value)
  • SH M Y 32 (Spacing Margin Y Axis Value)
  • SH M X 32 (Spacing Margin X Axis Value)
  • SH M T 32 (Spacing Margin Top Value)
  • SH M R 32 (Spacing Margin Right Value)
  • SH M B 32 (Spacing Margin Bottom Value)
  • SH M L 32 (Spacing Margin Left Value)

Mobile:

  • SM M 32 (Spacing Margin Value)
  • SM M Y 32 (Spacing Margin Y Axis Value)
  • SM M X 32 (Spacing Margin X Axis Value)
  • SM M T 32 (Spacing Margin Top Value)
  • SM M R 32 (Spacing Margin Right Value)
  • SM M B 32 (Spacing Margin Bottom Value)
  • SM M L 32 (Spacing Margin Left Value)

Grid

To apply the grid to an element add a class name related to a specific grid settings. Class names for grid are constructed like this: L G 2 Col (Layout Grid 2 Columns)

Check the examples below to learn how to use grid classes.

Examples of Grid Classes:

  • L G 2 Col (Layout Grid 2 Columns)
  • L G 3 Col (Layout Grid 3 Columns)
  • L G 4 Col (Layout Grid 4 Columns)

Grid Behaviour on Mobile Devices

To make sure that the content in grid is properly displayed on mobile devices some grid classes change their layout while in smaller breakpoints. Below you can learn how these classes are affected on smaller breakpoints.

  • L G 2 Col (1 Column on Mobile Landscape and below)
  • L G 3 Col (1 Column on Mobile Landscape and below)
  • L G 4 Col (2 Columns on Tablet, 1 Column on Mobile Landscape and below)

Editing Grid on Mobile Devices

You can easily edit grid to match your needs on mobile devices. Simply add a class to your grid component while working in a specific breakpoint. For example, to change from 4 column grid to 1 column grid on Tablet:

  1. Select your grid component
  2. Change your breakpoint to Tablet
  3. Add a class name - for example LT G 1 Col
  4. Click on Edit Grid
  5. Remove 3 Columns

Best Practices

Page Description

Consistent spacing and layout creates visual balance that makes the user interface easier for users to scan. Apply consistent spacing to improve the quality of the UI.

Video tutorials

Coming soon...

arrow_upward