Let's not forget that our elements can have more than two classes. Thus we find two cases.

The first case is the well-known combo classes for which a second class applied to an element overrides or adds CSS properties to those set by the first.

Combo classes

The second is what we at The System call multi classes, where the CSS properties are obtained from the sum of all the properties of the classes added to an element.

Multi classes

Prev

<aside> ⬅️ Display

</aside>

Next

<aside> ➡️ Combo classes

</aside>

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