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. You can apply the spacing to your components and sections by adding following spacing classes. Spacing available in the system:
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.