Classes

There are two types of classes: Global classes & Custom classes. All global classes are self-explanatory and start with a word ( ex: margin-top-small ), whereas custom classes starts with the letter c- ( ex: c-ir35 ) that stands for "custom".
We'll dive more in detail below into how to name classes properly.

You must know CSS and the cascading principles to use this.

Global classes

Structure
.page-wrapper
Outer most parent of all elements on the page. This wraps every div and element on the page.
.main-wrapper
The main content of the page excluding the navigation and footer.
.section
Any section the website. Come with an inner top & bottom padding.
.container
Contains the content with a max-width of 1320px centered and 40px of right/left padding.
.container-small
Contains the content with a max-width of 600px centered and 40px of right/left padding.
Layout
.wrap-block
Wrap elements with a classic display:block
.wrap-flex-horizontal
Wrap elements with a horizontal flexbox
.wrap-flex-horizontal-spacearound
Wrap elements with a horizontal flexbox and distribute items with spaces around the edges.
.wrap-flex-horizontal-spacebetween
Wrap elements with a horizontal flexbox and distribute items all the way to the edges.
.wrap-flex-horizontal-centered
Wrap elements with a horizontal flexbox and distribute items in the center.
.wrap-flex-vertical
Wrap elements with a vertical flexbox
.wrap-flex-vertical-spacearound
Wrap elements with a horizontal flexbox and distribute items in the center.
.wrap-flex-vertical-spacebetween
Wrap elements with a horizontal flexbox and distribute items in the center.
.wrap-flex-vertical-centered
Wrap elements with a horizontal flexbox and distribute items in the center.
Typography
.hero-headline
H1 on all pages
.second-headline
H2 on all pages
.section-headline
H3's on all pages
.text
Main body text (default gray, inherit 20px font size default from body)
.text-medium
Main body text with font size 22px
.text-large
Main body text with font size 24px
.text-small
Main body text with font size 18px
.text-xsmall
Main body text with font size 16px
.TEXT-STYLE-ALLCAPS
text-transform:uppercase
.text-style-nowrap
white-space: nowrap
Text weight
.text-weight-semibold
font-weight: 600
.text-weight-normal
font-weight: 400
.text-weight-light
font-weight: 300
Text aligns
.text-align-left
text-align-left
.text-align-center
text-align-center
.text-align-right
text-align-right
Text colors
.text-color-white
text-color : #ffffff
.text-color-black
text-color : N900
.text-color-grey
text-color: N700
Spacing
Margins (goes for top, bottom, left & right)
.margin-(direction/ ex: bottom)-zero
Zero margin in that direction
.margin-(direction)-tiny
4px desktop, 2px mobile
.margin-(direction)-small
10px
.margin-(direction)-medium
20px desktop, 16px mobile
.margin-(direction)-large
40px desktop, 30px mobile
.margin-(direction)-huge
100px desktop, 80px tablet, 70px mobile
Paddings (goes for top, bottom, left & right)
.padding-(direction)-zero
0 padding in that direction
.padding-(direction)-tiny
0.125rem
.padding-(direction)-xxsmall
5px
.padding-(direction)-xsmall
10px
.padding-(direction)-small
20px
.padding-(direction)-medium
30px desktop, 25px tablet, 20px mobile
.padding-(direction)-large
40px desktop, 30px tablet & rest
.padding-(direction)-xlarge
60px desktop, 50px tablet, 35px mobile
.padding-(direction)-xxlarge
80px desktop, 60px tablet & 50px mobile
.padding-(direction)-huge
100px desktop, 80px tablet & 60px mobile
Remove all spacing
.spacing-clean
Margin:0rem, padding: 0rem
Other useful globals
Hide/Show
.hide
Display:none
.hide-tablet
Display:none from tablet
.hide-mobile-landscape
Display:none from mobile landscape
.hide-mobile-portrait
Display:none from mobile portrait
.show
Display:block
.show-tablet
Display:block from tablet
.show-mobile-landscape
Display:block from mobile landscape
.show-mobile-portrait
Display:block from mobile portrait
Max width: Set max-width to any element
.max-width-xlarge
max-width:1024px
.max-width-large
max-width:920px
.max-width-medium
max-width: 600px
.max-width-small
max-width: 320px
.max-width-full
Sets max-width to "none"
Advanced
.align-center
Margin left & right:auto, centers element inside its parent div
.full-absolute
Sets absolute position with 0% on all sides - add this class to a div to make it expand the entire size of the parent element, and make sure the parent div has 'position: relative'
Background-colors
.background-color-grey
background-color: n20
.background-color-white
background-color: #ffffff
.background-color-black
background-color: #000000
Box-shadow
.box-shadow
Value: box-shadow: 0px 7.062780380249023px 22.60089683532715px 0px rgba(25, 16, 79, 0.1);

Custom classes

All custom classes start with "c-" for "components" and uses the BEM (stands for block, element, modifier) naming convention.

Example

More information here: https://webflow.com/blog/class-naming-101-bem

Components

These are Webflow Symbols, reusable elements.

CTA's

.button
.is--secondary
Button secondary
.button
.ww
.is--icon
LinkedIn
Button

Links

Link with arrow
Link with arrow
Link left with arrow
Link left with arrow
Link no underline
Link no underline
Link
Link

Sections Components

Social Proof Sections
Infinite Logo Bar White BG
Infinite Logo Bar Black BG
Side Split Social Proof Black BG
Side Split Social Proof White BG
Centered Social Proof Black BG
Centered Social Proof White BG

Find freelancers ready to work, without the risk

With a fully vetted talent pool with a wide range of specialties, you'll be sure to find a talented professional perfect for your project.

Future-proof your hiring and sourcing with a fully vetted marketplace with 100% compliant automated contracts and payroll
Overlay
Section- Plain Text - Image Left - Overlay - CTA
Male employee showing  work on laptop screen to female employeeExcerpt of the platform talent showcase

Hire faster with trusted talent

Build an internal global talent pool that companies and freelancers love - or tap into our elite marketplace - while still using your best recruiters and candidate hiring processes
This is a button
Section- Plain Text - Image Right - Overlay - CTA

Automate compliant contracts and payments

Save time and remove risk with automated compliant contracts, payroll and processes for your entire external workforce, globally.
Button
Female employee working at deskExcerpt of the platform talent showcase
Section- Plain Text - Image Left - Overlay - CTA
Male employee showing  work on laptop screen to female employeeExcerpt of the platform talent showcase

Hire faster with trusted talent

Build an internal global talent pool that companies and freelancers love - or tap into our elite marketplace - while still using your best recruiters and candidate hiring processes
Section- Plain Text - Image Right - Overlay

Automate compliant contracts and payments

Save time and remove risk with automated compliant contracts, payroll and processes for your entire external workforce, globally.
Female employee working at deskExcerpt of the platform talent showcase
Pinpoints
Pinpoints section

Save your favorite freelancers and consultants with custom skill tagging for future work.

Upload your existing talent pool and your recruiters to optimize your hiring and managing.

Give access to every hiring stakeholder in your company, with unlimited users at no extra cost.

Section- Pinpoints - Image Right - Overlay

Automate compliant contracts and payments

Save your favorite freelancers and consultants with custom skill tagging for future work.

Upload your existing talent pool and your recruiters to optimize your hiring and managing.

Give access to every hiring stakeholder in your company, with unlimited users at no extra cost.

Female employee working at deskExcerpt of the platform talent showcase
Section- Pinpoints - Image Left - Overlay
Male employee showing  work on laptop screen to female employeeExcerpt of the platform talent showcase

Hire faster with trusted talent

Save your favorite freelancers and consultants with custom skill tagging for future work.

Upload your existing talent pool and your recruiters to optimize your hiring and managing.

Give access to every hiring stakeholder in your company, with unlimited users at no extra cost.

Icons
Three icons with text

Powerful functionality, all in one place

The modern workforce keeps processes and tooling in one system, removing tedious ways of working.

Hire faster without risk

Already have an awesome pool of talent, or need access to new specialists? Create a trusted global contingent workforce with automated hiring controls, processes and background checks, with Employer of Record (EOR) available.

A consultative partnership

More than just a product, Worksome's team provides ongoing operational support, advice and trainings for your team - built on international tax and legal expertise.

Automated global compliance

With Worksome's onboarding and billing, generate compliant contracts or pay your specialists in just a few clicks, 100% compliance guaranteed, every payment fully insured.

Section - Full size quote from client

“Until now, we’ve never had a single platform to manage everything. The fluidity of the platform really works in our favor.”

Florence Stevensesn, Resource Manager at Oliver Agency
Book Demo Form - Hubspot Embed

Schedule a demo

Fill out the form below and an expert will reach out to you shortly

Logo support - Full line
Trusted by +25,000 global companies
Section - CTAs - Full with shapes

Build your contractor workforce today

Speak with us to see how Worksome can help your business. Or post a job, it only takes 5 minutes!

Are you working as a freelancer or looking for work?

Yes, I am a freelancer!
Section - CTAs simple

Build your contractor workforce today

Speak with us to see how Worksome can help your business. Or post a job, it only takes 5 minutes!

Are you working as a freelancer or looking for work?

Yes, I am a freelancer!

Want to find your dream job?

Find high quality work, easily manage contracts and invoices, and get paid faster.

Book a demo

We got you every steps of the way

1.
2.
3.
4.

By removing internal back and forth and automating processes, Worksome lets you onboard freelancers in minutes. No more waiting for contracts or compliance checks before they can start projects for your clients.

Managing freelancers in different countries and states can quickly become a compliance nightmare. Worksome handles worker classification for you, so that you can focus on creating great work for your clients.

With automated on time payments, there’s no more wasting time for your billing departments and no more late payments for your freelancers. That means less stress for your internal teams and higher retention rates with your best freelancers.

Worksome gives you one centralized view into every aspect of your freelance management. Instead of trying to get a handle on your current workforce, you can focus more on strategic resource planning for a more successful future.

FIND
CONTRACT
MANAGE
OPTIMIZE
Enable your freelancers
2. CONTRACT
3. MANAGE
4. OPTIMIZE

Worksome gives you one centralized view into every aspect of your freelance management. Instead of trying to get a handle on your current workforce, you can focus more on strategic resource planning for a more successful future.

Managing freelancers in different countries and states can quickly become a compliance nightmare. Worksome handles worker classification for you, so that you can focus on creating great work for your clients.

With automated on time payments, there’s no more wasting time for your billing departments and no more late payments for your freelancers. That means less stress for your internal teams and higher retention rates with your best freelancers.

Worksome gives you one centralized view into every aspect of your freelance management. Instead of trying to get a handle on your current workforce, you can focus more on strategic resource planning for a more successful future.

Rich-text

This is the Webflow Rich text element

.rte

What’s a Rich Text element?

This is a h1

This is a h2

This is a h3

This is a h4

This is a h5
This is a h6

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.

  • fesfsefse
  • fesfesfesfe
  • fesfes

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!

Smiling female employee
This is a caption

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.
Worksome
Worksome Design System Web