Webflow 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-largeThis is some text inside of a div block.
- u-text-style-mediumThis is some text inside of a div block.
- u-text-style-mainThis is some text inside of a div block.
- u-text-style-smallThis is some text inside of a div block.
- u-text-style-extra-smallThis is some text inside of a div block.
- u-text-style-tag-largeThis is some text inside of a div block.
- u-text-style-tag-mainThis is some text inside of a div block.
- u-text-style-tag-smallThis 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 when inside of a rich text element
All Ordered Lists
- List Item
- List Item
- List Item
- Item 1
- Item 2
- Item 3
All Unordered Lists
- List Item
- List Item
- List Item
- Item 1
- Item 2
- Item 3
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-alignment-start
Lorem ipsum dolor sit amet consectetur tortor semper.
u-alignment-center
Lorem ipsum dolor sit amet consectetur tortor semper.
u-alignment-end
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-inherit
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
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
Background Color
Lorem ipsum dolor sit amet.
u-background-transparent
Lorem ipsum dolor sit amet.
u-background-primary
Lorem ipsum dolor sit amet.
Label Text
Flexbox
Flex Direction Utilities
u-flex-horizontal-wrap
u-flex-vertical-wrap
u-flex-horizontal-nowrap
u-flex-vertical-nowrap
Align Self Utilities
u-align-self-variable
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch
Align Items Utilities
u-align-items-variable
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch
Justify Content Utilities
u-justify-content-variable
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around
Flex Basis Utilities
u-flex-shrink
u-flex-grow
u-flex-noshrink
Grid
Grid Utilities
u-grid-autofit
u-grid-autofill
u-grid-above
u-grid-below
u-grid-custom
u-grid-breakout
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-last
u-order-unset-above
u-order-unset-below
Sizes
Gap Utilities
u-gap-inherit
u-gap-gutter
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-gutter
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-auto
u-mt-gutter
u-mt-text
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-auto
u-mb-gutter
u-mb-text
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
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
Max Width Utilities
u-max-width-none
u-max-width-10ch
u-max-width-12ch
u-max-width-14ch
u-max-width-16ch
u-max-width-18ch
u-max-width-20ch
u-max-width-30ch
u-max-width-40ch
u-max-width-50ch
u-max-width-60ch
u-max-width-70ch
u-max-width-80ch
Other Utilities
u-container
u-container-large
u-container-small
u-container-extra-small
u-container-full
u-container-none
u-auto-center
u-full-width
u-full-height
u-all-unset-above
u-all-unset-below
u-pointer-on
u-pointer-off
u-visual-wrap
u-cover
u-cover-absolute
u-child-contain
u-sr-only
data-hide-if-empty-cms
u-margin-trim-off
Components
Global & Starter
Eyebrow
Eyebrow Text Goes Here
Heading
Lorem ipsum dolor sit amet elit
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.
Background
Visual
Spacer
Padding Vertical
Button Group
CSS / JS
Section Starter