Component classes combine two or more basic elements into units with greater visual and interactive meaning than their constituent parts.

Elements with component classes make up components. Components are made up of a main element and multiple secondary elements.

Example: a blog card or a subscription form.

Naming convention

| Main component class:

Component classes included in The System

Since components are unique to each project, The System template does not include component classes. It does include an example Card component to illustrate how these classes are used in The System.

There is only one component class created in The System and it corresponds to the only component that comes by default in Webflow, the Rich Text. The class gets the same name Rich Text.

Prev

<aside> ⬅️ Basic classes

</aside>

Next

<aside> ➡️ Structural 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