Spacing
Spacing classes provides you set of classes which will help you to build and maintain consistent spacing across components, blocks, sections, etc.
Supported:
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:
2px
4px
8px
12px
16px
24px
32px
48px
64px
120px
Spacing Classes
Spacing classes represented with Stack, Inline, Indent, Inset, Section classes and G Stack, G Inline group classes. Use them to provide proper spacing across components, blocks and sections.
Stack
Stack is a global class which adds bottom margin. Bellow you'll find table of existing stack scale
Neutrals
Inset
Inset is a global class which adds equal margin around the element. Bellow you'll find table of existing inset scale.
Inline
Inline is a global class which adds right margin. Bellow you'll find table of existing inline scale.
Indent
Indent is a global class which adds left margin. Bellow you'll find table of existing indent scale.
G Stack
Group spacing such as G Stack and G Inline are global classes and used to add spacing inside of elements groups. Uses flexbox (vertical direction) to provide space between group of elements.
G Inline
Uses flexbox (horizontal direction) to provide space between group of elements.
Section
With section classes you can set top and bottom margins for a whole section.