Utilities

This is where you find all global classes to empower your workflow and support the functionality and style of your website.

Display settings
Hidden on all breakpoints
.
hide
Hidden on desktop
.
hide-
desktop
Hidden on desktop and tablet
.
hide-
desktop-tablet
Hidden on tablet and mobile devices
.
hide-
tablet-mobile
Hidden on mobile devices
.
hide-
mobile
Overflow & Pointer Events
.
overflow-
visible
.
overflow-
hidden
.
overflow-
scroll
.
overflow-
auto
.
overflow-
clip
.
pointer-events-
off
.
pointer-events-
on
.
align-
center
.
display-
inlineflex
Text Weights
.text-weight-light
.
text-
weight-
light
.text-weight-normal
.
text-
weight-
normal
.text-weight-bold
.
text-
weight-
bold
.text-weight-black
.
text-
weight-
black
.text-weight-thin
.
text-
weight-
thin
.text-weight-xlight
.
text-
weight-
xlight
.text-weight-medium
.
text-
weight-
medium
.text-weight-semibold
.
text-
weight-
semibold
.text-weight-xbold
.
text-
weight-
xbold
Text Styles
.text-style-italic
.
text-
style-
italic
.text-style-uppercase
.
text-
style-
uppercase
.text-style-lowercase
.
text-
style-
lowercase
.text-style-strikethrough
.
text-
style-
strikethrough
.text-style-underline
.
text-
style-
underline
.text-style-link
.
text-
style-
link
.text-style-nowrap
.
text-
style-
nowrap
Block Quote
  1. Ordered List Item 01
  2. Ordered List Item 02
  3. Ordered List Item 03
  • Unordered List Item 01
  • Unordered List Item 02
  • Unordered List Item 03
Text Alignment
text-align-left
.
text-
align-
left
text-align-center
.
text-
align-
center
.text-align-right
.
text-
align-
right
Text Line Clamps

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

.
text-clamp-
line-
01
Line(s)
01

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

.
text-clamp-
line-
02
Line(s)
02

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

.
text-clamp-
line-
03
Line(s)
03

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

.
text-clamp-
line-
04
Line(s)
04
Images
.
image
.
image-parallax
.
is-
regular
.
image-parallax
.
is-
header
.
image-parallax
.
is-
section
.
image-parallax
.
is-
section-100vh
DOM headings

My
awesome
heading

.
dom
-heading

My
awesome
heading

.
dom
-heading

My
awesome
heading

.
dom
-heading
Size
.
height-
25
Height
25
%
.
height-
50
Height
50
%
.
height-
75
Height
75
%
.
height-
100
Height
100
%
.
width-
25
Width
25
%
.
width-
50
Width
25
%
.
width-
75
Width
25
%
.
width-
100
Width
25
%
Icon Sizes
Icon Size
12
px
.
icon-
12
Icon Size
16
px
.
icon-
16
Icon Size
24
px
.
icon-
24
Icon Size
32
px
.
icon-
32
Icon Size
48
px
.
icon-
48
Icon Size
64
px
.
icon-
64
Rotation
.
rotation-
45
Degrees
45
°
.
rotation-
90
Degrees
90
°
.
rotation-
135
Degrees
135
°
.
rotation-
180
Degrees
180
°
.
rotation-
225
Degrees
225
°
.
rotation-
270
Degrees
270
°
.
rotation-
315
Degrees
315
°
Opacity
.
opacity-
75
.
opacity-
50
.
opacity-
25
.
opacity-
0
.
opacity-
90
.
opacity-
80
.
opacity-
70
.
opacity-
60
.
opacity-
40
.
opacity-
30
.
opacity-
20
.
opacity-
10
Fades
.
fade-
left
.
fade-
right
.
fade-
top
.
fade-
bottom
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-
clor
.
blendmode-
luminosity