Style Guide

Typography

Headlines

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

Class
Size
Line height
Sample
Heading 1
80px
110%
Lorem Ipsum
Heading 2
60px
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. You can download the webfonts here. Please use the WOFF and WOFF2 format for better performance.

Class
Size
Line height
Sample
body-copy
32px
140%
Lorem Ipsum
large
24px
160%
Lorem Ipsum
medium
16px
160%
Lorem Ipsum
small
14.4px
160%
Lorem Ipsum

Typography helper classes

Class
What it does
is-txt-italic
Makes the text italic
bold
Makes the text bold
large
Makes the text large
medium
Makes the text medium
small
Makes the text small
txt-align-left
Aligns the text to the left
txt-align-center
Aligns the text to the center
is-txt-align-center
Aligns the text to the right
txt-align-right
Aligns the text to the right
is-txt-align-right
Makes the text bold
is-text-link
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.
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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C
Text link

Bold text

Emphasis

Superscript

Subscript

Colors

Lighten 2
Lighten 1
Lime Base
Darken 1
Darken 2
HEX
BG Class
TXT Class
#F1FB9D
is-bg-green-50
is-txt-green-50
#E2F63C
is-bg-green-75
is-txt-green-75
#DBF40C
is-bg-green-100
is-txt-green-100
#AFC309
is-bg-green-125
is-txt-green-125
#839207
is-bg-green-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-prm--med
Button Text
btn-sec--med
Button Text

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