The “Horizontal” module allows separating elements horizontally.

Vertical spacing is achieved with the column-gap property of flex.

Classes

The values of the Vertical module correspond to the fundamental spacing scale.

Horizontal / 2XS

Horizontal / XS

Horizontal / S

Horizontal / M

Horizontal / L

Horizontal / XL

Horizontal / 2XL

Horizontal / 3XL

Horizontal / 4XL

Horizontal / 5XL

Horizontal / 6XL

Horizontal / 7XL

Index

• The System
  1. 4 class types
     1. Basic classes
     2. Component classes
     3. Structural classes
        1. Custom
        2. Page
        3. Section
        4. Container
        5. Grid
     4. Functional Classes
        1. Vertical
        2. Horizontal
        3. Padding
        4. Heading
        5. Color
        6. Font Size
        7. Font Style
        8. Font
        9. Bg
        10. Line Height
        11. Align
        12. Position
        13. Display
        14. Ratio
  2. Class combination
     1. Combo-classes
     2. Muti-classes
  3. Foundational scales
     1. Foundational scale for headings
     2. Foundational scale for heading in Rich Text
     3. Foundational scale for body text
     4. Foundational scale for spacing
  4. Grid
  5. Gap