Buildforce Style Guide
We use MAST framework to build efficiently and help our Webflow site scale.
Typography
Fonts
PP Telegraph
Headings + Body
Type: PP Telegraph
Weights: Normal (400), Semiold (600)
Headings
H1 Headings
Element
H2 Headings
Element
H3 Headings
Element
H4 Headings
Element
H5 Headings
Element
H6 Headings
Element
h1
Class
h2
Class
h3
Class
h4
Class
h4
cc-regular
Class
h5
Class
h6
Class
Footer Links
footer-title-1
footer-title-2
Body
body-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
body-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
body-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
All Ordered Lists
- Example Ordered List
- Example Ordered List
All Unordered Lists
- Example Unordered List
- Example Unordered List
Color
Background
Primary
#1F40BA
u-bg-primary
Secondary
#000000
u-bg-secondary
Concrete 10
#e9e5d6
u-bg-concrete-10
Concrete 20
#d2cebf
u-bg-concrete-20
Concrete 30
#b8b5a7
u-bg-concrete-20
Text
Aa
Primary
#d14424
u-text-primary
Aa
White
#ffffff
u-text-white
Aa
Concrete
#ece5d8
u-text-concrete
Aa
Black A60
rgba(0,0,0,0.6)
u-text-black-a60
Components
Navigation
Buttons
Default
btn
Secondary
btn
cc-secondary
Text Link
All Links
Default Light
btn
cc-light
Secondary Light
btn
cc-secondary
cc-light
Text Link Light
u-text-white
Large
btn
cc-large
Button Group
Forms
Thank you for your submission!
Oops! Something went wrong while submitting the form.
Comparison Carousel
Say goodbye to staffing headaches
"Staffing agencies aren't reliable"
Field Operations
Over 90% of jobs get filled
Over 75% get a qualified candidates within 30 minutes
"Managing staffing agency partners is a lot of work"
Administrative Staff
Buildforce tools make it easy
"Staffing agencies are a risk for our business"
Owner
Buildforce provides a competitive advantage during bidding
Testimonials
Nothing compares to Buildforce
"Here is a quote"
Role
Read Success Story
Last Call
Accordians
Is Buildforce a staffing company?
This is the default rich text value
This is the default text value
Default Rich Text Content
This is the default rich text value
01
Title longhgggg
Here is some body text that is not that long.
Here is a second line.
FAQs
Diana, Luis, and our entire team are behind you every step of the way
You will have a dedicated support with your own account manager and an outstanding support team. Reach us via phone or in-app chat Monday through Friday, 7 AM to 7 PM.
Card
Title
Body
Title
Body
Avatars
Small
avatar
cc-sm
Default
avatar
Large
avatar
cc-lg
Avatar Group
Worker Card
Julio R.
All-Star
Would Rehire
Projects
1
Hours
512
Attendance Rate
95.6
%
All-Star Card
Buttons
Icons
Utilities
Margin
Top
u-mt-0
margin-top: 0;
u-mt-1
margin-top: 1em;
u-mt-2
margin-top: 2em;
u-mt-3
margin-top: 3em;
u-mt-auto
margin-top: auto;
Bottom
u-mb-0
margin-bottom: 0;
u-mb-.5
margin-bottom: .5rem;
u-mb-1
margin-bottom: 1rem;
u-mb-2
margin-bottom: 2rem;
u-mb-3
margin-bottom: 3rem;
Other
u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mr-1
margin-right: 1em;
u-ml-1
margin-left: 1em;
Padding
Top
u-pt-0
padding-top: 0;
u-pt-1
padding-top: 1rem;
u-pt-2
padding-top: 2rem;
u-pt-3
padding-top: 3rem;
Bottom
u-pb-0
padding-bottom: 0;
u-pb-1
padding-bottom: 1rem;
u-pb-2
padding-bottom: 2rem;
u-pb-3
padding-bottom: 3rem;
Other
u-p-0
padding: 0;
u-p-1
padding: 1em;
u-pl-1
padding-left: 1rem;
u-pr-1
padding-right: 1rem;
u-pl-2
padding-left: 2rem;
u-pr-2
padding-right: 2rem;
Alignment
u-text-center
text-align: center;
u-text-right
text-align: right;
Overflow
u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;
Display + position
u-d-none
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-position-relative;
position: relative;
Size
u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;
Helpers
u-img-cover
Multiple properties
u-link-cover
Multiple properties
Open link
u-aspect-1x1
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties
Layout
Section
section
Container
container
Grid
col
col
col
col
col
col
col
col
col
col
Grid - Desktop
col
col-lg-1
col
col-lg-11
col
col-lg-2
col
col-lg-10
col
col-lg-3
col
col-lg-9
col
col-lg-4
col
col-lg-8
col
col-lg-5
col
col-lg-7
col
col-lg-6
col
col-lg-6
col
col-lg-12
Grid - Tablet
col
col-md-1
col
col-md-11
col
col-md-2
col
col-md-10
col
col-md-3
col
col-md-9
col
col-md-4
col
col-md-8
col
col-md-5
col
col-md-7
col
col-md-6
col
col-md-6
col
col-md-12
Grid - Mobile Landscape
col
col-sm-1
col
col-sm-11
col
col-sm-2
col
col-sm-10
col
col-sm-3
col
col-sm-9
col
col-sm-4
col
col-sm-8
col
col-sm-5
col
col-sm-7
col
col-sm-6
col
col-sm-6
col
col-sm-12
Grid - Mobile Portrait
col
col-xs-1
col
col-xs-11
col
col-xs-2
col
col-xs-10
col
col-xs-3
col
col-xs-9
col
col-xs-4
col
col-xs-8
col
col-xs-5
col
col-xs-7
col
col-xs-6
col
col-xs-6
col
col-xs-12
Align columns
row
row-align-center
col
col
col
row
row-align-end
col
col
col
Justify columns
row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col
Reorder columns
col
col-lg-first
col
col-md-first
col
col-sm-first
col
col-xs-first
col
col-lg-last
col
col-md-last
col
col-sm-last
col
col-xs-last
Other columns modifiers
Shrink Column
col
col-shrink
col
Gutterless Column
row
row-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters