Global Styling:

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Swatch colors
Blacks & Whites
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.p-lrg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.p-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

link
Text Link
Buttons
.btn
.btn .btn2

Pre-Styled Classes

Use these classes for styling commonly used elements.

Window Size reference
lg - md - sm - xs

Important:

  • Start by styling the body(all pages) without adding a class.
  • Use .ctr to center align anything!
  • Give columns class '.col' to remove 10px left/right padding on SM & XS.
  • Make sure to give form states classes of .success and .error
  • Push margins from bottom of elements, not the top unless needed. Use .bot classes.
  • DO NOT style any images using the settings tab. Give them a class to control styles.
  • when creating new classes...SIMPLIFY. h=heading, p=paragraph, col=column, sect=section, msg=input

    ex.) .h-large, .p-thin, .col-about, .sect-blog, .msg-left, etc...

Class Settings ( do not edit )

Main Classes
.bot0
.bot10
.bot10
.bot25
.bot50
.bot75
.bot100
.float-l
.float-r
Text Classes
.ctr
.ctr-sm
.ctr-xs
.align-l
.align-r
.caps
.fff
.dark
.fa
.ctr
Display Classes
.inline
.block-sm
.block-xs
.hide-sm
.hide-xs
Responsive Margins
.bot25-sm
.bot25-xs
.bot50-sm
.bot50-xs
Main Classes
  • .sect = full width section (contains padding)
  • .row = 100% width section
  • .btn = button
  • .btn-sp = space between two buttons
  • .col = column (apply to every column!)
  • .p-sm = small paragraph
  • .p-lrg = large paragraph
  • .img = 100% width image
Text Classes
  • .ctr = text-align: center
  • .ctr-sm = text-align: center - SM
  • .ctr-xs = text-align: center - XS
  • .align-l = text-align: left
  • .align-r = text-align: right
  • .caps = uppercase
  • .fff = white text
  • .dark = dark text
  • .fa = fontawesome
Display Classes
  • .inline = display: inline
  • .block-sm = display: block - SM
  • .block-xs = display: block - XS
  • .hide = display: none
  • .hide-sm = display: none - SM
  • .hide-xs = display: none - XS
  • .rel = position: relative; z-index: 1
Margins & Spacing
  • .bot10 = margin-bottom: 10px
  • .bot25 = margin-bottom: 25px
  • .bot25-sm = margin-bottom: 25px - SM
  • .bot25-xs = margin-bottom: 25px - XS
  • .bot50 = margin-bottom: 50px
  • .bot50 = margin-bottom: 50px - SM
  • .bot50xs = margin-bottom: 50px - XS
  • .bot75 = margin-bottom: 75px
  • .bot75sm = margin-bottom: 75px - SM
  • .bot75xs = margin-bottom: 75px - XS
  • .bot100 = margin-bottom: 100px
  • .bot100sm = margin-bottom: 100px - SM
  • .bot100xs = margin-bottom: 100px - XS
  • .bot0 = margin-bottom: 0px;
  • .bot0sm = margin-bottom: 0px - SM
  • .bot0xs = margin-bottom: 0px - XS
  • .float-l = float left
  • .float-r = float right
Ul/Li Classes
  • .flex-list = ul with flex & wrap
Form Classes
  • .msg = form input
  • .msg.msg-area = form textarea
  • .success
  • .error
Column Classes
  • .col = display:none
  • .col-left = hidden on sm and xs
  • .col-right = hidden on xs
  • .flex-ctr = vertically center columns
  • .flip-md = flip on md
  • .flip-xs = flip on sm
Container Classes
  • .container = use if applying universal styles to containers
  • .contain-sm = small container
More classes
  • .overlay = absolute to corners div
  • .tri = corner div triangle
  • .img-sp = opacity:0; width:100%; (keeps ratios)
  • .dim = reduce opacity
Manual css Styles (in header code)
  • .pe-none = no pointer events on load
  • .hide-load = show in webflow, hide on load
Use for common elements!
  • .navlink = nav link
  • .ftlink = footer link
  • .soci = social icon
  • .inline = display: inline

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

The Form Title

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ratios

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim mas.
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim mas.
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Sliders

Value Props

Call to Action Section
Goes Right Here

Learn More

Blogs

Previous 1 2 3 4
...
79 Next

See How Leaf Can Help Your Organization.

Get Started

Who We Serve

Shippers Carriers Brokers

About Us

Team Press Blog Careers

Look Deeper

Members Meeting Contact Us Terms & Conditions Privacy Policy
© 2021, Leaf Logistics Inc. All rights reserved.