Get 10% Off

Sign up with your email and get 10% off your first diagnostics or vehicle inspection!

Submit
👍 Thanks for signing up!
Now you can find your 10% off code in your email!
Oops! Something went wrong while submitting the form.
Auto repair technician holding spanner wrench and working on a truck.

Style Guide

This page contains all styles and components used throught the website. This page help you to change any style from this style guide and it will apply throughout the site.

Colors

Grey Scale
100%
Grey Scale
80%
Grey Scale
60%
Grey Scale
40%
Grey Scale
20%
Grey Scale
15%
Grey Scale
10%
White Scale
100%
White Scale
80%
White Scale
60%
White Scale
40%
White Scale
20%
White Scale
15%
White Scale
10%
White Scale
0%

Semantic

Semantic
Backdrop
Semantic
Border
Semantic
Fader

COLORED

Brand
Primary

Errors

Errors
Text
Errors

Backdrop

Typography

Display

Display Heading

H1

H1 Heading
Looks like this.

Heading Style H1

H1 Heading
Looks like this.

H2

H2 Heading
Looks like this.

Heading Style H2

H2 Heading
Looks like this.

H3

H3 Heading
Looks like this.

Heading Style H3

H3 Heading
Looks like this.

H4

H4 Heading
Looks like this.

Heading Style H4

H4 Heading
Looks like this.

H5
H5 Heading
Looks like this.
Heading Style H5
H5 Heading
Looks like this.
H6
H6 Heading
Looks like this.
Heading Style H6
H6 Heading
Looks like this.
Text Size Large

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Text Size

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Text Size Small

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Text Size Extra Small

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Decorative Large

98%

Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
How to customize formatting for each rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Minimalistic design chair
  • Lorem ipsum
  • Lorem ipsum dolor sit amet
How to customize formatting for each rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Other HTML Tags

All Paragraphs

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

All Quotes
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
All Ordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.

  • Sample text is being used as a placeholder for real text that is normally present.

  • Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.

  2. Sample text is being used as a placeholder for real text that is normally present.

  3. Sample text is being used as a placeholder for real text that is normally present.

Text Weights

Text Weight Xbold

Text Weight Xbold

Text Weight Bold

Text Weight Bold

Text Weight Semibold

Text Weight Semibold

Text Weight Medium

Text Weight Medium

Text Weight Normal

Text Weight Normal

Text Weight Light

Text Weight Light

Text Styles

Text Style Strikethrough

Text Style Strikethrough

Text Style Underline

Text Style Strikethrough

Text Style Italic

Text Style Italic

Text Style Muted

Text Style Muted

Text Style Allcaps

Text Style Allcaps

Text Style Nowrap

Text Style Nowrap

Text Aligments

Text Align Left

Text Align Left

Text Align Center

Text Align Center

Text Align Right

Text Align Right

Text Align Justify

Text Align Justify

Text Colors

Text Color G100

Text Color G100

Text Color G60

Text Color G60

Text Color Brand Primary

Text Color Brand Primary

Text Color W100

Text Color W100

Text Color W60

Text Color W60

Links

Nav Link
Text Inline Link
Text Inline Link
How often should repair my car?

Buttons

Button
is Inverted
Button
is Icon
Button
is Icon
is Inverted
Service Button
Brand Button
Slider Arrows

Form Elements

Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

Max Width Xxlarge
Max Width Xlarge
Max Width Large
Max Width Medium
Max Width Small
Max Width Xsmall
Max Width Xxsmall
Catalytic Converter
4x4 / Transfer Case / Differential / Driveline
Thermostat & Water Pump
Wheel Rotations & Alignment
Tune-ups
Electrical
Engine Services
Transmission Care
Service & Maintenance
Inspection Service
Battery & Alternator
Oil Changes (oil, lube, filter)
System Diagnostics
Heating & Сooling
Steering & Suspension
Belts
Brakes

Icons

Unify icons sizes.

Icon Small
Icon Small
Icon Medium
Icon Large

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
align-center
z-index-1
z-index-2
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
is--relative

Spacers System

Use this additional spaces if needed.
You can easily choose predefined space just input class that you need or create your own.

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Size Classes

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Margins

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3