Typography

Headlines

The font for headlines is Sora Regular. You can download the webfonts here. Please use the WOFF and WOFF2 format for better performance.

Class
Size
Line height
Sample
is-display
80px
110%
Lorem Ipsum
is-h1
25px
120%
Lorem Ipsum
is-h2
48px
120%
Lorem Ipsum
is-h3
39px
120%
Lorem Ipsum
is-h4
31px
120%
Lorem Ipsum
is-h5
25px
130%
Lorem Ipsum
is-h6
20px
130%
Lorem Ipsum

Body copy

The font for the body copy is Inter Medium and Inter Bold. You can download the webfonts here. Please use the WOFF and WOFF2 format for better performance.

Class
Size
Line height
Sample
is-txt-xlarge
32px
140%
Lorem Ipsum
is-txt-large
24px
160%
Lorem Ipsum
is-txt-medium
16px
160%
Lorem Ipsum
is-txt-small
14.4px
160%
Lorem Ipsum
is-txt-xsmall
11.2px
160%
Lorem Ipsum

Typography helper classes

Class
What it does
is-txt-italic
Makes the text italic
is-txt-bold
Makes the text bold
is-txt-normal
Makes the text normal
is-txt-underlined
Makes the text underlined
is-txt-cut-2lines
Cuts the text off after two lines and ads three stops at the end
is-txt-cut-3lines
Cuts the text off after two lines and ads three stops at the end
is-txt-allcaps
Capitalizes all letters
is-txt-align-left
Aligns the text to the left
is-txt-align-center
Aligns the text to the center
is-txt-align-center
Aligns the text to the right
is-txt-align-right
Aligns the text to the right
is-txt-align-right
Makes the text bold
Styles the inline text link

Typography components

list--bullets
list--links
list--check
  • Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.
Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Placeholder image

Colors

Lighten 2
Lighten 1
Base
Darken 1
Darken 2
HEX
BG Class
TXT Class
#0DCFFF
is-bg-blue-50
is-txt-blue-50
#0CA6E8
is-bg-blue-75
is-txt-blue-75
#0099FF
is-bg-blue-100
is-txt-blue-100
#0C7AE8
is-bg-blue-125
is-txt-blue-125
#032C6B
is-bg-blue-150
is-txt-green-150
HEX
BG Class
TXT Class
#4A4A4A
is-bg-black-50
is-txt-black-50
#1D1D1D
is-bg-black-75
is-txt-black-75
#181818
is-bg-black-100
is-txt-black-100
#101010
is-bg-black-125
is-txt-black-125
#000000
is-bg-black-150
is-txt-black-150
HEX
BG Class
TXT Class
#FFFFFF
is-bg-white-50
is-txt-white-50
#F1F1F1
is-bg-white-75
is-txt-white-75
#E7E7E7
is-bg-white-100
is-txt-white-100
#B0B0B0
is-bg-white-125
is-txt-white-125
#818181
is-bg-white-150
is-txt-white-150

Buttons

Class
Sample
btn-primary
btn-secondary

Button helper classes

Class
What it does
is-btn-d-fw
The buttons width becomes 100% of its parent on desktop
is-btn-t-fw
The buttons width becomes 100% of its parent on tablet
is-btn-l-fw
The buttons width becomes 100% of its parent on mobile landscape
is-btn-p-fw
The buttons width becomes 100% of its parent on mobile portrait

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Containers

Full width
0 padding left and right
container-fullwidth
12 ColumnsEquals a max-width of 1280px and 160px padding left and right
container-col-12
10 ColumnsEquals a max-width of 1061px and 160px padding left and right
container-col-10
8 ColumnsEquals a max-width of 843px and 160px padding left and right
container-col-8
6 ColumnsEquals a max-width of 624px and 160px padding left and right
container-col-6
4 ColumnsEquals a max-width of 405px and 160px padding left and right
container-col-4

Grids

grid--6-6
grid--8-4
grid--4-8
grid--4-4-4
grid--3-3-3-3
grid--2-2-2-2-2-2

Spacing system

Margins

Top
Bottom
Top and bottom
Em
Px
Sample
is-margin-t-4
is-margin-b-4
is-margin-tb-4
0.25em
4px
is-margin-t-8
is-margin-b-8
is-margin-tb-8
0.5em
8px
is-margin-t-16
is-margin-b-16
is-margin-tb-16
1em
16px
is-margin-t-24
is-margin-b-24
is-margin-tb-24
1.5em
24px
is-margin-t-32
is-margin-b-32
is-margin-tb-32
2em
32px
is-margin-t-40
is-margin-b-40
is-margin-tb-40
2.5em
40px
is-margin-t-48
is-margin-b-48
is-margin-tb-48
3em
48px
is-margin-t-56
is-margin-b-56
is-margin-tb-56
3.5em
56px
is-margin-t-64
is-margin-b-64
is-margin-tb-64
4em
64px
is-margin-t-72
is-margin-b-72
is-margin-tb-72
4.5em
72px
is-margin-t-80
is-margin-b-80
is-margin-tb-80
5em
80px
is-margin-t-88
is-margin-b-88
is-margin-tb-88
5.5em
88px
is-margin-t-96
is-margin-b-96
is-margin-tb-96
6em
96px
is-margin-t-104
is-margin-b-104
is-margin-tb-104
6.5em
104px
is-margin-t-112
is-margin-b-112
is-margin-tb-112
7em
112px
is-margin-t-120
is-margin-b-120
is-margin-tb-120
7.5em
120px
is-margin-t-128
is-margin-b-128
is-margin-tb-128
8em
128px
is-margin-t-136
is-margin-b-136
is-margin-tb-136
8.5em
136px
is-margin-t-144
is-margin-b-144
is-margin-tb-144
9em
144px
is-margin-t-152
is-margin-b-152
is-margin-tb-152
9.5em
152px
is-margin-t-160
is-margin-b-160
is-margin-tb-160
10em
160px
is-margin-t-168
is-margin-b-168
is-margin-tb-168
10.5em
168px
is-margin-t-176
is-margin-b-176
is-margin-tb-176
11em
176px
is-margin-t-184
is-margin-b-184
is-margin-tb-184
11.5em
184px
is-margin-t-192
is-margin-b-192
is-margin-tb-192
12em
192px
is-margin-t-200
is-margin-b-200
is-margin-tb-200
12.5em
200px
is-margin-t-208
is-margin-b-208
is-margin-tb-208
13em
208px
is-margin-t-216
is-margin-b-216
is-margin-tb-216
13.5em
216px
is-margin-t-224
is-margin-b-224
is-margin-tb-224
14em
224px
is-margin-t-232
is-margin-b-232
is-margin-tb-232
14.5em
232px
is-margin-t-240
is-margin-b-240
is-margin-tb-240
15em
240px
is-margin-t-248
is-margin-b-248
is-margin-tb-248
15.5em
248px
is-margin-t-256
is-margin-b-256
is-margin-tb-256
16em
256px

Paddings

Top
Bottom
Top and bottom
Em
Px
Sample
is-pad-t-4
is-pad-b-4
is-pad-tb-4
0.25em
4px
is-pad-t-8
is-pad-b-8
is-pad-tb-8
0.5em
8px
is-pad-t-16
is-pad-b-16
is-pad-tb-16
1em
16px
is-pad-t-24
is-pad-b-24
is-pad-tb-24
1.5em
24px
is-pad-t-32
is-pad-b-32
is-pad-tb-32
2em
32px
is-pad-t-40
is-pad-b-40
is-pad-tb-40
2.5em
40px
is-pad-t-48
is-pad-b-48
is-pad-tb-48
3em
48px
is-pad-t-56
is-pad-b-56
is-pad-tb-56
3.5em
56px
is-pad-t-64
is-pad-b-64
is-pad-tb-64
4em
64px
is-pad-t-72
is-pad-b-72
is-pad-tb-72
4.5em
72px
is-pad-t-80
is-pad-b-80
is-pad-tb-80
5em
80px
is-pad-t-88
is-pad-b-88
is-pad-tb-88
5.5em
88px
is-pad-t-96
is-pad-b-96
is-pad-tb-96
6em
96px
is-pad-t-104
is-pad-b-104
is-pad-tb-104
6.5em
104px
is-pad-t-112
is-pad-b-112
is-pad-tb-112
7em
112px
is-pad-t-120
is-pad-b-120
is-pad-tb-120
7.5em
120px
is-pad-t-128
is-pad-b-128
is-pad-tb-128
8em
128px
is-pad-t-136
is-pad-b-136
is-pad-tb-136
8.5em
136px
is-pad-t-144
is-pad-b-144
is-pad-tb-144
9em
144px
is-pad-t-152
is-pad-b-152
is-pad-tb-152
9.5em
152px
is-pad-t-160
is-pad-b-160
is-pad-tb-160
10em
160px
is-pad-t-168
is-pad-b-168
is-pad-tb-168
10.5em
168px
is-pad-t-176
is-pad-b-176
is-pad-tb-176
11em
176px
is-pad-t-184
is-pad-b-184
is-pad-tb-184
11.5em
184px
is-pad-t-192
is-pad-b-192
is-pad-tb-192
12em
192px
is-pad-t-200
is-pad-b-200
is-pad-tb-200
12.5em
200px
is-pad-t-208
is-pad-b-208
is-pad-tb-208
13em
208px
is-pad-t-216
is-pad-b-216
is-pad-tb-216
13.5em
216px
is-pad-t-224
is-pad-b-224
is-pad-tb-224
14em
224px
is-pad-t-232
is-pad-b-232
is-pad-tb-232
14.5em
232px
is-pad-t-240
is-pad-b-240
is-pad-tb-240
15em
240px
is-pad-t-248
is-pad-b-248
is-pad-tb-248
15.5em
248px
is-pad-t-256
is-pad-b-256
is-pad-tb-256
16em
256px

Misc helpers

Aspect ratios

Class
What it does
Sample
aspect-ratio-3-4
Applied to a parent div a video or image becomes an aspect ratio of 3:4
aspect-ratio-1-1
Applied to a parent div a video or image becomes an aspect ratio of 1:1
aspect-ratio-4-3
Applied to a parent div a video or image becomes an aspect ratio of 4:3
aspect-ratio-16-9
Applied to a parent div a video or image becomes an aspect ratio of 16:9
aspect-ratio-2-1
Applied to a parent div a video or image becomes an aspect ratio of 2:1

Flex helpers

Class
What it does
wrap-flex-vert-c
Applied to a parent div it becomes display flex and vertical centered
wrap-flex-vert-c
Applied to a parent div it becomes display flex and vertical centered
wrap-flex-hor-c
Applied to a parent div it becomes display flex and vertical centered
wrap-flex-hor-c
Applied to a parent div it becomes display flex and vertical centered

Show and hide

Class
What it does
is-d-visible
Is displayed on desktop
is-d-visible
Is displayed on desktop
is-d-hidden
Is hidden on desktop
is-d-hidden
Is hidden on desktop
is-t-visible
Is displayed from tablet and down
is-t-visible
Is displayed from tablet and down
is-t-hidden
Is hidden from tablet and down
is-t-hidden
Is hidden from tablet and down
is-l-visible
Is displayed from landscape mobile and down
is-l-visible
Is displayed from landscape mobile and down
is-l-hidden
Is hidden from landscape mobile and down
is-l-hidden
Is hidden from landscape mobile and down
is-p-visible
Is displayed from portrait mobile and down
is-p-visible
Is displayed from portrait mobile and down
is-p-hidden
Is hidden from landscape mobile and down
is-p-hidden
Is hidden from landscape mobile and down

Actual classes (margins)

is-margin-t-4
is-margin-b-4
is-margin-tb-4
is-margin-t-8
is-margin-b-8
is-margin-tb-8
is-margin-t-16
is-margin-b-16
is-margin-tb-16
is-margin-t-24
is-margin-b-24
is-margin-tb-24
is-margin-t-32
is-margin-b-32
is-margin-tb-32
is-margin-t-40
is-margin-b-40
is-margin-tb-40
is-margin-t-48
is-margin-b-48
is-margin-tb-48
is-margin-t-56
is-margin-b-56
is-margin-tb-56
is-margin-t-64
is-margin-b-64
is-margin-tb-64
is-margin-t-72
is-margin-b-72
is-margin-tb-72
is-margin-t-80
is-margin-b-80
is-margin-tb-80
is-margin-t-88
is-margin-b-88
is-margin-tb-88
is-margin-t-96
is-margin-b-96
is-margin-tb-96
is-margin-t-104
is-margin-b-104
is-margin-tb-104
is-margin-t-112
is-margin-b-112
is-margin-tb-112
is-margin-t-120
is-margin-b-120
is-margin-tb-120
is-margin-t-128
is-margin-b-128
is-margin-tb-128
is-margin-t-136
is-margin-b-136
is-margin-tb-136
is-margin-t-144
is-margin-b-144
is-margin-tb-144
is-margin-t-152
is-margin-b-152
is-margin-tb-152
is-margin-t-160
is-margin-b-160
is-margin-tb-160
is-margin-t-168
is-margin-b-168
is-margin-tb-168
is-margin-t-176
is-margin-b-176
is-margin-tb-176
is-margin-t-184
is-margin-b-184
is-margin-tb-184
is-margin-t-192
is-margin-b-192
is-margin-tb-192
is-margin-t-200
is-margin-b-200
is-margin-tb-200
is-margin-t-208
is-margin-b-208
is-margin-tb-208
is-margin-t-216
is-margin-b-216
is-margin-tb-216
is-margin-t-224
is-margin-b-224
is-margin-tb-224
is-margin-t-232
is-margin-b-232
is-margin-tb-232
is-margin-t-240
is-margin-b-240
is-margin-tb-240
is-margin-t-248
is-margin-b-248
is-margin-tb-248
is-margin-t-256
is-margin-b-256
is-margin-tb-256

Actual classes (paddings)

is-pad-t-4
is-pad-b-4
is-pad-tb-4
is-pad-t-8
is-pad-b-8
is-pad-tb-8
is-pad-t-16
is-pad-b-16
is-pad-tb-16
is-pad-t-24
is-pad-b-24
is-pad-tb-24
is-pad-t-32
is-pad-b-32
is-pad-tb-32
is-pad-t-40
is-pad-b-40
is-pad-tb-40
is-pad-t-48
is-pad-b-48
is-pad-tb-48
is-pad-t-56
is-pad-b-56
is-pad-tb-56
is-pad-t-64
is-pad-b-64
is-pad-tb-64
is-pad-t-72
is-pad-b-72
is-pad-tb-72
is-pad-t-80
is-pad-b-80
is-pad-tb-80
is-pad-t-88
is-pad-b-88
is-pad-tb-88
is-pad-t-96
is-pad-b-96
is-pad-tb-96
is-pad-t-104
is-pad-b-104
is-pad-tb-104
is-pad-t-112
is-pad-b-112
is-pad-tb-112
is-pad-t-120
is-pad-b-120
is-pad-tb-120
is-pad-t-128
is-pad-b-128
is-pad-tb-128
is-pad-t-136
is-pad-b-136
is-pad-tb-136
is-pad-t-144
is-pad-b-144
is-pad-tb-144
is-pad-t-152
is-pad-b-152
is-pad-tb-152
is-pad-t-160
is-pad-b-160
is-pad-tb-160
is-pad-t-168
is-pad-b-168
is-pad-tb-168
is-pad-t-176
is-pad-b-176
is-pad-tb-176
is-pad-t-184
is-pad-b-184
is-pad-tb-184
is-pad-t-192
is-pad-b-192
is-pad-tb-192
is-pad-t-200
is-pad-b-200
is-pad-tb-200
is-pad-t-208
is-pad-b-208
is-pad-tb-208
is-pad-t-216
is-pad-b-216
is-pad-tb-216
is-pad-t-224
is-pad-b-224
is-pad-tb-224
is-pad-t-232
is-pad-b-232
is-pad-tb-232
is-pad-t-240
is-pad-b-240
is-pad-tb-240
is-pad-t-248
is-pad-b-248
is-pad-tb-248
is-pad-t-256
is-pad-b-256
is-pad-tb-256