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

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

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.

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.

Colors

Lighten 2

Lighten 1

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

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

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

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