The “Heading” module allows you to apply different headline sizes. Every time a heading is used on a website, it should have a class and should not rely on heading levels set on semantic HTML tags. Basically, headings should not

Naming convention

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

Heading / 2XL

Heading / XL

Heading / L

Heading / M

Heading / S

Heading / XS

Heading / 2XS

<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

• Forward Slash
  1. What is Forward Slash?
  2. 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. Color
        5. Bg
        6. Heading
        7. Font Size
        8. Font Style
        9. Line Height
        10. Align
        11. Position
        12. Display
        13. Ratio
  3. Class combination
     1. Combo-classes
     2. Multi-classes
  4. Grid
  5. Gap
  6. 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
  7. What’s New?