Typography

Headlines

Class

Size

Line height

Sample

is-h1

60px

120%

H1 Normal

is-h1

60px

120%

H1 Normal

is-h2

32px

120%

H2 Normal

is-h2

32px

120%

H2 Normal

is-h3

26px

120%

H3 Normal

is-h3

26px

120%

H3 Normal

Body copy

Class

Size

Line height

Sample

is-txt-xlarge

32px

140%

Lorem Ipsum

is-txt-large

24px

160%

Lorem Ipsum

is-txt-medium-1

20px

160%

Lorem Ipsum

is-txt-medium-2

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.

Buttons

Class

Sample

btn-prm--med

btn-sec--med

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

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

Grid system

Container

Row

Column

Col

Desktop

col-lg-1

col-lg-11

col-lg-2

col-lg-10

col-lg-3

col-lg-9

col-lg-4

col-lg-8

col-lg-5

col-lg-7

col-lg-6

col-lg-12

Tablet

col-md-1

col-md-11

col-md-2

col-md-10

col-md-3

col-md-9

col-md-4

col-md-8

col-md-5

col-md-7

col-md-6

col-md-12

md-no-margin

Mobile

col-xs-1

col-xs-11

col-xs-2

col-xs-10

col-xs-3

col-xs-9

col-xs-4

col-xs-8

col-xs-5

col-xs-7

col-xs-6

col-xs-12

xs-no-margin

Margin

col

Properties

Align start

Align center

Align end

Align stretch

Justify start

Justify center

Justify end

Justify between

Justify around

Display

md--hide

sm--hide

xs--hide

Colors

HEX

BG Class

TXT Class

#DBF40C

is-bg-orange

is-txt-orange

#AFC309

is-bg-orange-darker

is-txt-orange-darker

HEX

BG Class

TXT Class

#FFFFFF

is-bg-white

is-txt-white

#EDEDED

is-bg-lighter-3

is-txt-lighter-3

#C8C8C8

is-bg-lighter-2

is-txt-lighter-2

#A4A4A4,

is-bg-lighter-1

is-txt-lighter-1

#7F7F7F

is-bg-neutral

is-txt-neutral

#5A5A5A

is-bg-darker-1

is-txt-darker-1

#363636

is-bg-darker-2

is-txt-darker-2

#111111

is-bg-darker-3

is-txt-darker-3

#000000

is-bg-black

is-txt-black