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-display
Display
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-main
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-main
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
- List Item
All Unordered Lists
- List Item
- List Item
- List Item
Font Family
u-text-font-primary
Lorem ipsum dolor sit amet.
u-text-font-secondary
Lorem ipsum dolor sit amet.
Font Weight
u-weight-thin
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-extra-light
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-light
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-regular
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-medium
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-semibold
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-bold
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-extra-bold
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
u-weight-black
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam.
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
u-theme-light
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
u-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(--_theme---text--primary) 50%, transparent)
Lorem ipsum dolor sit amet.
Label Text
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-vflex-right-center
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-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
u-gap-9
u-gap-10
u-gap-11
u-gap-12
Row Gap Utilities
u-gap-row-inherit
u-gap-row-0
u-gap-row-1
u-gap-row-2
u-gap-row-3
u-gap-row-4
u-gap-row-5
u-gap-row-6
u-gap-row-7
u-gap-row-8
u-gap-row-9
u-gap-row-10
u-gap-row-11
u-gap-row-12
Margin Top Utilities
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
u-mt-9
u-mt-10
u-mt-11
u-mt-12
Margin Bottom Utilities
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
u-mb-9
u-mb-10
u-mb-11
u-mb-12
Border Radius
u-radius-none
u-radius-inherit
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"
data-padding-top="extra-large"
data-padding-bottom="extra-large"
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-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