Typography

Titles

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

Class

Size

Line height

Sample

is-h1

72px

120%

This is a Title

is-h2

48px

120%

This is a Title

is-h3

28px

120%

This is a Title

is-h4

18px

120%

This is a Title

is-h5

24px

120%

This is a Subtitle

is-h6

18px

120%

This is a Subtitle

Subtitles

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

Class

Size

Line height

Sample

is-h5

24px

120%

Lorem Ipsum

is-h6

18px

120%

Lorem Ipsum

Body copy

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

Class

Size

Line height

Sample

is-txt-xlarge

24px

140%

This is body copy

is-txt-large

18px

160%

This is body copy

is-txt-medium

16px

160%

This is body copy

is-txt-small

14px

160%

This is body copy

is-txt-xsmall

12px

160%

This is body copy

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

Torque by Ryder is bringing a new era of convenience and uptime right to your door.
Torque by Ryder is bringing a new era of convenience and uptime right to your door.
Torque by Ryder is bringing a new era of convenience and uptime right to your door.

Torque by Ryder is bringing a new era of convenience and uptime right to your door.

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

Name

Light Orange

BG Class

TXT Class

Light Orange

#FFEFE5

is-bg-orange-75

is-txt-orange-75

Torque Orange

#FF6A13

is-bg-orange-100

is-txt-orange-100

Deep Orange

#E03600

is-bg-orange-125

is-txt-orange-125

Red

is-bg-orange-150

is-txt-orange-150

Name

HEX

BG Class

TXT Class

Torque Light Blue

#EBF1FF

is-bg-blue-75

is-txt-blue-75

Torque Blue

#0033A0

is-bg-blue-100

is-txt-blue-100

Deep Blue

#0F1847

is-bg-blue-125

is-txt-blue-125

Name

HEX

BG Class

TXT Class

Green

#12641F

is-bg-green

is-txt-green

Yellow

#F7B202

is-bg-yellow

is-txt-yellow

Name

HEX

BG Class

TXT Class

White

#FFFFFF

is-bg-black-50

is-txt-black-50

Light Grey

#F2F2F2

is-bg-black-75

is-txt-black-75

Mid Grey

#C0C0C0

is-bg-black-100

is-txt-black-100

Dark Grey

#737373

is-bg-black-125

is-txt-black-125

Black

#212121

is-bg-black-150

is-txt-black-150

Buttons

Class

Sample

btn--prm-med

Get Started

btn--prm-med

btn--sec-med

Cancel

btn--sec-med

Confirm

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