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
Heading 3
48px
120%
Lorem Ipsum
Heading 4
39px
120%
Lorem Ipsum
Headinng 5
31px
120%
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
Small
24px
160%
Lorem Ipsum
Medium
16px
160%
Lorem Ipsum
Large
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
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,
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At enim hic etiam dolore. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Duo Reges: constructio interrete. Si quicquam extra virtutem habeatur in bonis. Iam doloris medicamenta illa Epicurea tamquam de narthecio proment: Si gravis, brevis; Proclivi currit oratio. Videsne quam sit magna dissensio?
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
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
primary-button
primary-button / outline
Containers
Full width
0 padding left and right
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
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