The Blueprint
A Webflow Build Bible
Category
Utilities
Created by
Bram Brouwer
© 0000
ARR

Utilities

Display settings

Lorem ipsum dolor sit amet consectetur. Lacus adipiscing nullam mattis vitae mattis maecenas aliquam nisl sollicitudin. Vel sed vitae consectetur quis tellus eu tortor.

Hidden on all breakpoints
.
hide
Hidden on desktop
.
hide-
desktop
Hidden on desktop and tablet
.
hide-
desktop-tablet
Hidden on tablet and mobile
.
hide-
tablet-mobile
Hidden on mobile
.
hide-
mobile

Overflow

.
overflow-
visible
.
overflow-
hidden
.
overflow-
scroll
.
overflow-
auto
.
overflow-
clip

Pointer Events

.
pointer-events-
off
.
pointer-events-
on
.
user-select-
none

Text Weights

.text-weight-thin
.text-weight-xlight
.text-weight-light
.text-weight-normal
.text-weight-medium
.text-weight-semibold
.text-weight-bold
.text-weight-xbold
.text-weight-black

Text Styles

.text-style-italic
.text-style-strikethrough
.text-style-underline
.text-style-link
.text-style-uppercase
.text-style-lowercase
.text-style-lowercase
.text-style-nowrap
Block Quote
  1. Ordered List Item 01
  2. Ordered List Item 02
  3. Ordered List Item 03
  • Ordered List Item 01
  • Ordered List Item 02
  • Ordered List Item 03

Text Alignment

.text-align-left
.text-align-center
.text-align-right

Text Clamps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.
text-clamp-
line-01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.
text-clamp-
line-02

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.
text-clamp-
line-03

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.
text-clamp-
line-04

Sizes

.
height-
25
.
height-
50
.
height-
75
.
height-
100
.
width-
25
.
width-
50
.
width-
75
.
width-
100

Icon Sizes

.
icon-
12px
.
icon-
16px
.
icon-
18px
.
icon-
24px
.
icon-
32px
.
icon-
40px
.
icon-
48px
.
icon-
64px

Opacity

.
opacity-
90
.
opacity-
80
.
opacity-
75
.
opacity-
70
.
opacity-
60
.
opacity-
50
.
opacity-
40
.
opacity-
30
.
opacity-
25
.
opacity-
20
.
opacity-
10
.
opacity-
0

Rotation

.
rotation-
45
.
rotation-
90
.
rotation-
135
.
rotation-
180
.
rotation-
225
.
rotation-
270
.
rotation-
315

Lottie

.
lottie
.
lottie

Border Radius

.
radius_
card-content

Custom Headings

Heading

My
Webflow logo
custom
Figma logo
heading

Fades

.
fade-
horizontal
.
fade-
left
.
fade-
right
.
fade-
vertical
.
fade-
top
.
fade-
bottom
.
fade-
horizontal-64px
.
fade-
left-64px
.
fade-
right-64px
.
fade-
vertical-64px
.
fade-
top-64px
.
fade-
bottom-64px
.
fade-
vignette
.
fade-
vignette-64px
.
fade-
radial
.
fade-
radial-64px

Blendmodes

.
blendmode-
darken
.
blendmode-
multiply
.
blendmode-
color-burn
.
blendmode-
lighten
.
blendmode-
screen
.
blendmode-
color-dodge
.
blendmode-
overlay
.
blendmode-
soft-light
.
blendmode-
hard-light
.
blendmode-
difference
.
blendmode-
exclusion
.
blendmode-
hue
.
blendmode-
saturation
.
blendmode-
color
.
blendmode-
luminosity