Kongponents

# Type

# Font family

Kongponents defaults to the system font for sans-serif and monospace. You can customize the font-family by setting the CSS variables as shown here:

:root {
  --font-family-sans: 'Roboto'; // custom font-family
  --font-family-mono: 'Roboto Mono'; // custom font-family
}

# Font weight

The default font-weight (for body) is set to 400. You may customize the font-weight by setting the CSS variable as shown here:

:root {
  --font-weight-normal: 200; // custom font-weight
}

TIP

This only applies to the body element and inherited font weights. Individual style rules still have varying font-weight attributes.

# Font size

There are utility classes for font-size.

# Sans Font Styles

Variable Name: xxxl
Font Size: 32px
Class: .type-xxxl
Sample:

Kong is a Lua application running in Nginx

Variable Name: xxl
Font Size: 28px
Class: .type-xxl
Sample:

Kong is a Lua application running in Nginx

Variable Name: xl
Font Size: 22px
Class: .type-xl
Sample:

Kong is a Lua application running in Nginx

Variable Name: lg
Font Size: 18px
Class: .type-lg
Sample:

Kong is a Lua application running in Nginx

Variable Name: md
Font Size: 16px
Class: .type-md
Sample:

Kong is a Lua application running in Nginx

Variable Name: sm
Font Size: 14px
Class: .type-sm
Sample:

Kong is a Lua application running in Nginx

Variable Name: xs
Font Size: 12px
Class: .type-xs
Sample:

Kong is a Lua application running in Nginx

# Mono Font Styles

Variable Name: xxxl
Font Size: (32px*.95%) 30.4px
Class: .type-xxxl
Sample:

Kong is a Lua application running in Nginx

Variable Name: xxl
Font Size: (28px*.95%) 26.6px
Class: .type-xxl
Sample:

Kong is a Lua application running in Nginx

Variable Name: xl
Font Size: (22px*.95%) 20.9px
Class: .type-xl
Sample:

Kong is a Lua application running in Nginx

Variable Name: lg
Font Size: (18px*.95%) 17.1px
Class: .type-lg
Sample:

Kong is a Lua application running in Nginx

Variable Name: md
Font Size: (16px*.95%) 15.2px
Class: .type-md
Sample:

Kong is a Lua application running in Nginx

Variable Name: sm
Font Size: (14px*.95%) 13.3px
Class: .type-sm
Sample:

Kong is a Lua application running in Nginx

Variable Name: xs
Font Size: (12px*.95%) 11.4px
Class: .type-xs
Sample:

Kong is a Lua application running in Nginx

# Content Styles

There are also utility classes for quick styling of different content types.

# Heading

# Body

← Forms →