The “Vertical” module allows separating elements vertically.

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

Classes

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

Vertical / 2XS

Vertical / XS

Vertical / S

Vertical / M

Vertical / L

Vertical / XL

Vertical / 2XL

Vertical / 3XL

Vertical / 4XL

Vertical / 5XL

Vertical / 6XL

Vertical / 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