Workshore Style guide

Version 1.0
Webflow components
Workshore.io

Page Structure

Page structure
main-wrapper
Wraps all sections
section-[page_name]-[section-name]
Wraps one section
container-[size]
Manages horizontal spacing
padding-section-[size]
Manages vertical spacing

Container

main-wrapper
container-large
container-medium
container-small
section-padding-xs
section-padding-small
section-padding-medium
section-padding-large

Colors

Text Colors
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-tertiary
text-color-tertiary
text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white
Background Colors
bg-color-primary
bg-color-secondary
bg-color-tertiary
bg-color-muted
bg-color-black
bg-color-white

Typography

Headings
jumbo-heading
Jumbo Heading
h1

Heading 1

h2

Heading 2

h3

Heading 3

h4

Heading 4

h5
Heading 5
h6
Heading 6
Text sizes
text-size-xl

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-large

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-medium

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-regular

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-small

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-xs

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

Other HTML tags
All Block Quotes
Block quote
All Unordered Lists

  • No bullet list

  • No bullet list

All Unordered Lists

  • No bullet list

  • No bullet list

All Ordered Lists

  1. No bullet list

  2. No bullet list

  3. No bullet list

Text weights
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 letter spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text line heights
text-lineheight-xtall
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-tall
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-normal
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-short
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-xshort
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-none
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-link
text-style-muted
text-style-muted
Text alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich text
rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

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.

Image element

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item

Layout Spacing

Paddings

Combo 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

Combo margin classes. [margin-direction] + [margin-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
Flex

Combo flex classes. [flex-direction] + [gap-size].

Direction Classes

f-horizontal
f-vertical

Gap size classes

gap-tiny
gap-xxsmall
gap-xsmall
gap-small
gap-medium
gap-large
gap-xlarge
gap-xxlarge
gap-huge
gap-xhuge
gap-xxhuge
gap-custom1
gap-custom2
gap-custom3
Grid

Responsive Grids

Column Classes

grid-2col-responsive
grid-3col-responsive
grid-4col-responsive

Gap Size Classes

grid-gap-small
grid-gap-medium
grid-gap-large

Alignments

Flex Overrides

h: horizontal, v: vertical

h-align-top
h-align-center
h-align-bottom
h-align-stretch
h-justify-left
h-justify-center
h-justify-right
h-justify-spacebetween
h-justify-spacearound
v-align-left
v-align-center
v-align-right
v-align-stretch
v-justify-top
v-justify-center
v-justify-bottom
v-justify-spacebetween
v-justify-spacearound

UI elements

Buttons
button-primary
Button Text
button-small
Button Text
button-secondary
Button Text
button-large
Button Text
button-tertiary
Button Text
button-text
Button Text
button-w-icon
Button Text
button-w-text-icon
Text Link
button-slider-left
Slider Button Left
button-slider-right
Slider Button Right
Box shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-small
shadow-large
shadow-xlarge
shadow-xxlarge
Border radius
These classes will change the corner radius
b-radius-small
b-radius-medium
b-radius-large
Form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Image icons (fixed height and width)
Fixed height and fixed width so images are constrained 1:1.
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-custom
Images
Image element class name will be always same: .wrapper-image
Image aspect ratio 1:1
image-wrapper-1:1
Image aspect ratio 4:3
image-wrapper-4:3
Image aspect ratio 3:2
image-wrapper-3:2
Image aspect ratio 16:9
image-wrapper-16:9

Utility Classes

Utility classes
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
show-tablet
This element is hidden
show-mobile
This element is hidden
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
clean-spacing
align-center
z-index-1
z-index-2
z-index-99
display-inlineflex
pos-rel
pos-absolute
pos-sticky-top
max-height

Animation library

Add class name to assign the animation
"Check out Pixeto's tutorial for a better understanding, Here you just need add a class name instead of adding animations."
a-up-0.1
0.1 sec
a-up-0.2
0.2 sec
a-up-0.3
0.3 sec
a-up-0.4
0.4 sec
a-down-0.1
0.1 sec
a-down-0.2
0.2 sec
a-down-0.3
0.3 sec
a-down-0.4
0.4 sec
a-left-0.1
0.1 sec
a-left-0.2
0.2 sec
a-left-0.3
0.3 sec
a-left-0.4
0.4 sec
a-right-0.1
0.1 sec
a-right-0.2
0.2 sec
a-right-0.3
0.3 sec
a-right-0.4
0.4 sec
a-scale_in-0.1
0.1 sec
a-scale_in-0.2
0.2 sec
a-scale_in-0.3
0.3 sec
a-scale_in-0.4
0.4 sec