Version 1.0.1

Style guide

On this page, you can customize the core classes for your project and make global edits to your site at any time.

Core classes

Typography #

HTML classes

H1

H2

H3

H4

H5
H6
HTML text classes

All Paragraphs

All Links
  • All Unordered Lists

  • All Unordered Lists

  1. All Ordered Lists

  2. All Ordered Lists

Buttons #

Forms #

Plain input field
Number input field
Describe the field
Describe the field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Structure classes

Page #

page
main
code-embeds

Container #

container
container-m
container-s

Grid #

Row
row
Column
col
col

Columns #

Note that following classes are not global but rather combo classes to class of .col therefore are never to be used as standalone classes.
Column - Desktop
d-12
d-1
d-11
d-10
d-2
d-3
d-9
d-8
d-4
d-5
d-7
d-6
d-6
Column - Tablet
t-12
t-1
t-11
t-10
t-2
t-3
t-9
t-8
t-4
t-5
t-7
t-6
t-6
Column - Mobile Landscape
ml-12
ml-1
ml-11
ml-10
ml-2
ml-3
ml-9
ml-4
ml-8
ml-5
ml-7
ml-6
ml-6
Column - Mobile
m-12
m-1
m-11
m-10
m-2
m-3
m-9
m-8
m-4
m-5
m-7
m-6
m-6

Build classes

UI element classes#

Icons
Icons relative

Spacing #

Vertical spacing
v-0
v-4
v-8
v-12
v-16
v-20
v-24
v-32
v-40
v-60
v-80
v-120
Horizontal spacing
h-4
h-8
h-12
h-16
h-20
h-24
h-32
h-40

Flex utility classes #

Flex direction
flex-ver
flex-ver-t
flex-ver-ml
flex-ver-m
flex-hor
flex-hor-t
flex-hor-ml
flex-hor-m
Flex alignment
align-start
align-center
align-end
align-stretch
Flex justify content
justify-center
justify-end
justify-between
justify-around

Project elements

Styles saver#

FAQ
Services and Offerings
FAQ and Blog

Services and Offerings

Text Link
  1. Text Link
  1. Text Link
Text Link