Styleguide

Shipfix — 2022

HTML Heading Tags
Heading H1
Heading XXL
72 px

H1
Lorem ipsum dolor sit amet

Heading H2
Heading XL
52 px

H2
Lorem ipsum dolor sit amet

Heading H3
Heading LG
40 px

H3
Lorem ipsum dolor sit amet

Heading H4
Heading MD
32 px

H4
Lorem ipsum dolor sit amet

Heading H5
Heading SM
24 px
H5
Lorem ipsum dolor sit amet
Heading H6
Heading XS
18 px
H6
Lorem ipsum dolor sit amet
Heading Classes
heading-xxl
Heading H1
72 px

Heading xxlarge
Lorem ipsum dolor sit amet

heading-xl
Heading H2
52 px

Heading xlarge
Lorem ipsum dolor sit amet

heading-lg
Heading H3
40 px

Heading large
Lorem ipsum dolor sit amet

heading-md
Heading H4
32 px

Heading medium
Lorem ipsum dolor sit amet

heading-sm
Heading H5
24 px
Heading small
Lorem ipsum dolor sit amet
heading-xs
Heading H6
18 px
Heading xsmall
Lorem ipsum dolor sit amet
Other HTML Tags
Paragraph
Text size MD
16 px

Global Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Link
Global Link
Block Quote
Global Block Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text Classes
text-size-xl
24 px

Text size xlarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

text-size-lg
20 px

Text size large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

text-size-md
Default paragraph size
16 px

Text size medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-size-sm
14 px

Text size small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-size-xs
12 px

Text size xsmall
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-style-underline

Lorem ipsum dolor sit amet

text-style-italic

Lorem ipsum dolor sit amet

text-style-allcaps

Lorem ipsum dolor sit amet

text-style-strikethrough

Lorem ipsum dolor sit amet

text-style-quote
Text style quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
text-style-2lines

text style 2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-style-3lines

text style 3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich Text
text-rich-text

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a placeholder image
Text Weights
text-weight-bold

Text weight bold
Lorem ipsum dolor sit amet

text-weight-semibold

Text weight bold
Lorem ipsum dolor sit amet

text-weight-regular

Text weight regular
Lorem ipsum dolor sit amet

text-weight-light

Text weight light
Lorem ipsum dolor sit amet

Text Alignements
text-align-left

Text align left
Lorem ipsum dolor sit amet

text-align-center

Text align center
Lorem ipsum dolor sit amet

text-align-right

Text align right
Lorem ipsum dolor sit amet

Text Colors
text-color-black

Text color black
Lorem ipsum dolor sit amet

text-color-dark-silver

Text color Blue Silver Deep
Lorem ipsum dolor sit amet

text-color-dark-blue-silver

Text color Blue Silver Deep
Lorem ipsum dolor sit amet

text-color-blue-silver-deep

Text color Blue Silver Deep
Lorem ipsum dolor sit amet

text-color-blue-silver-matte

Text color Blue Silver Matte
Lorem ipsum dolor sit amet

text-color-white

Text color white
Lorem ipsum dolor sit amet

text-color-light-blue

Text color white
Lorem ipsum dolor sit amet

Color Palette
bg-color-black
bg-color-dark-silver
bg-color-dark-blue-silver
bg-color-blue-silver-deep
bg-color-blue-silver-matte
bg-color-blue-silver
bg-color-light-blue-silver
bg-color-super-light-blue-silver
bg-color-almost-white-blue-silver
bg-color-white
bg-color-light-blue
bg-color-light-blue-darker
bg-color-medium-blue
bg-color-medium-blue-darker
bg-color-dark-blue
Buttons
button
button

Button text

button
button

Button text

button
button

Button text

button
button
is-small

Button text

button
button
is-small

Button text

button
button
is-small

Button text

button
button
is-black

Button text

button
button
is-black

Button text

button
button
is-black

Button text

button
button
is-black

Button text

button
button
is-black

Button text

button
button
is-black

Button text

button
button
is-transparent

Button text

button
button
is-transparent

Button text

button
button
is-transparent

Button text

button
button
is-transparent

Button text

button
button
is-transparent

Button text

button
button
is-transparent

Button text

button
button
is-white

Button text

button
button
is-white

Button text

button
button
is-white

Button text

link
button
is-link

Button text

link
button
is-link

Button text

link
button
is-link

Button text

link
button
is-link

Button text

link
button
is-link-white

Button text

link
button
is-link

Button text

Icons
icon-sm
icon-md
icon-lg
Icons 1x1
icon-sm-1x1
icon-md-1x1
icon-lg-1x1
Social Media Icons
Webflow Elements
Unordered List
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
Ordered List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit
Image
Forms
Form
form
Label
form_field-input
form_field-input.is--text-area
form_field-input.is--select-input
form_checkbox
form_checkbox-icon
form_checkbox-icon
Checked
form_radio
form_radio-icon
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Spacing Margin Classes
margin-0
margin-4
margin-8
margin-16
margin-24
margin-32
margin-40
margin-64
margin-80
margin-104
margin-128
margin-160
margin-192
Spacing Padding Classes
padding-0
padding-4
padding-8
padding-16
padding-24
padding-32
padding-64
padding-80
padding-128
padding-192
Direction Margin Classes
margin-top
margin-bottom
margin-left
margin-right
margin-vertical
margin-horizontal
Direction Padding Classes
padding-top
padding-bottom
padding-left
padding-right
padding-vertical
padding-horizontal
Custom Classes
Visual separators for technical ease
clickable-off
Disable click / tap event
clickable-on
Enable click / tap event
div-square
Make the div perfectly squared
align-center
Align element with margin auto left and right
hide
Hide element on all breakpoints
t-hide
Hide element on tablet and smaller
ml-hide
Hide element on mobile landscape and smaller
m-hide
Hide element on mobile portrait
text-no-wrap
Makes a span of text not wrap
z-index-5
Positions a div relative and sets its Z-index to 5
z-index-10
Positions a div relative and sets its Z-index to 10
img-drop-shadow
Adds a drop shadow to images — Edit shadow in the Global CSS symbol
testislider_item-w
slick-active
Testimonial slider active slide styles
testislider_item-w
slick-active
Testimonial slider active slide styles

Lorem ipsum

Lorem ipsum