Final File
/
Webflow Style GuideWebflow Style Guide
This is the style guide that we use when starting with any type of Webflow projects. It's inspired by the Lumos Framework from Timothy Ricks and Client First from Finsweet. Credit goes to them for their great work and giving me the best tools to perform. Edit these styles and UI elements here and the changes will be reflected throughout the library.
Typography
Font Styles
u-text-style-h1
Heading 1
u-text-style-h2
Heading 2
u-text-style-h3
Heading 3
u-text-style-h4
Heading 4
u-text-style-h5
Heading 5
u-text-style-h6
Heading 6
u-text-style-large
This is some text inside of a div block.
u-text-style-medium
This is some text inside of a div block.
u-text-style-regular
This is some text inside of a div block.
u-text-style-small
This is some text inside of a div block.
u-text-style-extra-small
This is some text inside of a div block.
u-text-style-tag-large
This is some text inside of a div block.
u-text-style-tag-regular
This is some text inside of a div block.
u-text-style-tag-small
This is some text inside of a div block.
Text Links
Rich Text
All Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
Block quote
Ordered list
- Item
- Item
- Item
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
u-rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
Block quote
Ordered list
- Item
- Item
- Item
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Typography Elements
All Links
Text LinkFigure
All Block Quotes
Block Quote
All Ordered Lists
- List Item
- List Item
- List Item
All Unordered Lists
- List Item
- List Item
- List Item
Font Family
u-font-primary
Lorem ipsum dolor sit amet.
Font Weight
u-weight-light
This is some text inside of a div block.
u-weight-regular
This is some text inside of a div block.
u-weight-medium
This is some text inside of a div block.
u-weight-semibold
This is some text inside of a div block.
u-weight-bold
This is some text inside of a div block.
Line Clamp
u-line-clamp-1
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-2
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-3
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-4
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-5
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
Text Align
u-text-align-left
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-align-center
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-align-right
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-align-streched
Lorem ipsum dolor sit amet consectetur tortor semper.
Text Transform
u-text-transform-none
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-uppercase
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-capitalize
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-lowercase
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-italic
Lorem ipsum dolor sit amet consectetur tortor semper.
Text Wrap
u-text-wrap-default
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames.
u-text-wrap-pretty
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames.
u-text-wrap-balance
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames.
Colors
Themes
data-theme="invert"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
data-theme="inherit"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
data-theme="light"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
data-theme="dark"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Color
Lorem ipsum dolor sit amet.
u-color-inherit
Lorem ipsum dolor sit amet.
u-color-faded
color-mix(in srgb, var(--text--primary) 50%, transparent)
Lorem ipsum dolor sit amet.
u-color-primary
Lorem ipsum dolor sit amet.
u-color-secondary
Flexbox
Horizontal Flex Utilities
u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-strech
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch
Vertical Flex Utilities
u-vflex-left-top
u-vflex-left-center
u-vflex-left-center
u-vflex-left-stretch
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-line-clamp-5
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between
Other Flex Utilities
u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink
Grid
Grid Utilities
u-grid-custom
u-grid-breakout
u-grid-desktop
u-grid-tablet
u-grid-landscape
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-grid-autofit
u-grid-subgrid
u-grid-flex
Column Utilites
u-column-custom
u-column-full
u-column-indent
u-column-1
u-column-2
u-column-3
u-column-4
u-column-5
u-column-6
u-column-7
u-column-8
u-column-9
u-column-10
u-column-11
u-column-12
Order Utilities
u-order-first
u-order-first-desktop
u-order-first-tablet
u-order-first-landscape
u-order-last-desktop
u-order-last-tablet
Sizes
Gap Utilities
u-gap-inherit
u-gap-grid
u-gap-0
u-gap-1
u-gap-2
u-gap-3
u-gap-4
u-gap-5
u-gap-6
u-gap-7
u-gap-8
Row Gap Utilities
u-gap-row-inherit
u-gap-row-grid
u-gap-row-0
u-gap-row-1
u-gap-row-2
u-gap-row-3
u-gap-row-main
u-gap-row-medium
u-gap-row-large
u-gap-row-extra-large
u-gap-row-ultra-large
Margin Top Utilities
u-mt-grid
u-mt-0
u-mt-1
u-mt-2
u-mt-3
u-mt-4
u-mt-5
u-mt-6
u-mt-7
u-mt-8
Margin Bottom Utilities
u-mb-grid
u-mb-0
u-mb-1
u-mb-2
u-mb-3
u-mb-4
u-mb-5
u-mb-6
u-mb-7
u-mb-8
Border Radius
u-radius-none
u-radius-none
u-radius-small
u-radius-main
u-radius-large
u-radius-round
Section Spacing Attributes
data-padding-top="none"
data-padding-bottom="none"
data-padding-top="extra-small"
data-padding-bottom="extra-small"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="medium"
data-padding-bottom="medium"
data-padding-top="large"
data-padding-bottom="large"
Adaptive Values
size.0rem
0rem
size.0.125rem
0.125rem
size.0.25rem
0.25rem
size.0.375rem
0.375rem
size.0.5rem
0.5rem
size.0.625rem
0.625rem
size.0.75rem
0.75rem
size.0.875rem
0.875rem
size.1rem
1rem
size.1.125rem
1.125rem
size.1.25rem
1.25rem
size.1.5rem
1.5rem
size.1.75rem
1.75rem
size.2rem
2rem
size.2.5rem
2.5rem
size.3rem
3rem
size.3.5rem
3.5rem
size.4rem
4rem
size.4.5rem
4.5rem
size.5rem
5rem
size.5.5rem
5.5rem
size.6rem
6rem
size.6.5rem
6.5rem
size.7rem
7rem
size.7.5rem
7.5rem
size.8rem
8rem
size.8.5rem
8.5rem
size.9rem
9rem
size.9.5rem
9.5rem
size.10rem
10rem
size.11rem
11rem
size.12rem
12rem
size.13rem
13rem
size.14rem
14rem
size.15rem
15rem
size.16rem
16rem
Miscellaneos
Display & Hide Utilties
u-display-block
u-display-inline-block
u-display-inline-block
u-display-inline
u-display-inline
u-display-none
u-display-tablet-none
u-display-landscape-none
u-display-mobile-none
u-hide-if-empty
u-hide-if-empty-cms
Overflow Utilities
u-overflow-visible
u-overflow-hidden
u-overflow-clip
u-overflow-scroll
u-overflow-auto
u-overflow-x-auto
u-overflow-y-auto
u-overflow-hidden-left
Z-Index Utilities
u-zindex-negative
u-zindex-0
u-zindex-unset
u-zindex-1
u-zindex-2
u-zindex-3
Position Utilities
u-position-static
u-position-relative
u-position-absolute
u-position-fixed
u-position-sticky
Other Utilities
u-container
u-container-large
u-container-small
u-container-full
u-container-none
u-auto-center
u-button-style
u-full-width
u-full-height
u-pointer-on
u-pointer-off
u-visual-wrap
u-cover
u-cover-absolute
u-sr-only
data-hide-if-empty-cms
u-margin-trim-off
u-child-contain
Components
Global & Starter
Eyebrow
Eyebrow Label Goes Here
Heading
Heading
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.
Visual
Spacer
CSS / JS
Section Starer