The “Heading” module allows you to apply different headline sizes.

Naming convention

The “Heading” values correspond to the typographic scale for headlines.

Heading / H1

Heading / H2

Heading / H3

Heading / H4

Heading / H5

Heading / H6

<aside> 💡 The Heading classes replicate the same values applied to the corresponding H tags. This allows us to separate the style information from the hierarchical order that the H tags should follow on the same page.

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