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.
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:
You can apply the spacing to your components and sections by adding following 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.
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.
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.
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:
Learn how to properly use and edit these components.
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.
Coming soon...