Typography

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:

scss

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

scss

: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

Variable Name: style-heading-1

Class: .style-heading-1

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-heading-2

Class: .style-heading-2

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-heading-3

Class: .style-heading-3

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-heading-4

Class: .style-heading-4

Sample:

Kong is a Lua application running in Nginx

Body

Variable Name: style-body-lg-bold

Class: .style-body-lg-bold

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-lg

Class: .style-body-lg

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-md-bold

Class: .style-body-md-bold

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-md

Class: .style-body-md

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-sm-bold

Class: .style-body-sm-bold

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-sm

Class: .style-body-sm

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-link

Class: .style-body-link

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-bc

Class: .style-body-bc

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-code

Class: .style-body-code

Sample:

Kong is a Lua application running in Nginx

Variable Name: style-body-tiny

Class: .style-body-tiny

Sample:

Kong is a Lua application running in Nginx