Styles Guide

Alignment
Colors
Column
CSS Animations
Gap
Gradients
Headings
Layout Display
Effects
Section
Spacing
Text Size
Text Styles
Max Width
Align Content
(Item parent is block)
align-content--start
Item
align-content--center
Item
align-content--end
Item
Justify content
(Item parent is flex)
justify-content--start
Item
justify-content--center
Item
justify-content--end
Item
Align Items
(Item parent is flex)
align-items--start
Item
align-items--center
Item
align-items--end
Item
Justify Items
(Item parent is block)
justify-items--start
Item
justify-items--center
Item
justify-items--end
Item
Push Content
push-to--inline-start
Item
push-to--inline-end
Item
push-to--block-start
Item
push-to--block-end
Item
Text
Colors
color-white
color-black
color-dark
color-light
color-foreground
color-background
color-gray-050
color-gray-100
color-gray-200
color-gray-300
color-gray-400
color-gray-500
color-gray-600
color-gray-700
color-gray-800
color-gray-850
color-gray-900
color-gray-950
color-primary
color-primary-dark
color-primary-light
color-secondary
color-secondary-dark
color-secondary-light
color-tertiary
color-tertiary-dark
color-tertiary-light
color-success
color-success-light
color-alert
color-alert-light
color-error
color-error-light
color-facebook
color-twitter
color-youtube
color-linkedin
color-whatsapp
color-instagram-pink
color-instagram-purple
color-instagram-blue
color-instagram-yellow
color-instagram-orange
Background
Colors

bg-color-white

bg-color-dark

bg-color-black

bg-color-light

bg-color-foreground

bg-color-white

bg-color-gray-050

bg-color-gray-100

bg-color-gray-200

bg-color-gray-300

bg-color-gray-400

bg-color-gray-500

bg-color-gray-600

bg-color-gray-700

bg-color-gray-800

bg-color-white

bg-color-white

bg-color-white

bg-color-primary

bg-color-primary-dark

bg-color-primary-light

bg-color-secondary

bg-color-secondary-dark

bg-color-secondary-light

bg-color-tertiary

bg-color-tertiary-dark

bg-color-tertiary-light

bg-color-success

bg-color-success-light

bg-color-alert

bg-color-alert-light

bg-color-error

bg-color-error-light

bg-color-facebook

bg-color-twitter

bg-color-linkedin

bg-color-youtube

bg-color-whatsapp

bg-color-instagram-blue

bg-color-instagram-purple

bg-color-instagram-pink

bg-color-instagram-orange

bg-color-instagram-yellow

Columns
column--10
Item
column--10
Item
column--15
Item
column--20
Item
column--25
Item
column--30
Item
column--35
Item
column--40
Item
column--45
Item
column--50
Item
column--55
Item
column--60
Item
column--65
Item
column--70
Item
column--75
Item
column--80
Item
column--85
Item
column--90
Item
column--95
Item
column--100
Item
Text
hover--underline
Effects
Shine
Item
Slide
slide-up
Item
slide-down
Item
slide-start
Item
slide-end
Item
Scale
hover--scale-up
Item
hover--scale-down
Item
Rotate
rotate-x + deg-180
rotate-y + deg-180
rotate-z + deg-90
Gap Tiny
Item
Item
Item
Item
Item
Item
Item
Item
Gap Small
Item
Item
Item
Item
Item
Item
Item
Item
Gap Medium
Item
Item
Item
Item
Item
Item
Item
Item
Gap Large
Item
Item
Item
Item
Item
Item
Item
Item
Text
Gradients
Gradients
** Styles are generated via custom code AND variables **

- View Variables in Webflow Variables/Gradient 

- View css code in "Custom Styles - Global" Component: [GS]Utiities/Gradients

‍

Your Code

‍

Text Gradient

‍

Your Info

‍

Your Code

‍

text-gradienttext-gradienttext-gradienttext-gradient
Text Gradient 3colors

‍

Your Info

‍

Your Code

‍

text-gradienttext-gradienttext-gradienttext-gradient
Background
Gradients
Gradients
** Styles are generated via custom code AND variables **

- View Variables in Webflow Variables/Gradient 

- View css code in "Custom Styles - Global" Component: [GS]Utiities/Gradients

‍

Your Code

‍

Gradient

‍

Your Info

‍

Your Code

‍

gradient

gradient + gradient-flip

gradient + grad-end-gray-900

gradient + grad-start-gray-900 + deg-60

gradient + deg-0

gradient + deg-90

Gradient 3colors

‍

Your Info

‍

Your Code

‍

gradient-3colors

gradient-3colors + gradient-flip

gradient-3colors + grad-center-gray-900

gradient-3colors + grad-start-gray-900 + deg-180

gradient-3colors + deg-150 + grad-center-gray-900

gradient-3colors + deg-90

Border
Gradients
Gradients
** Styles are generated via custom code AND variables **

- View Variables in Webflow Variables/Gradient 

- View css code in "Custom Styles - Global" Component: [GS]Utiities/Gradients

‍

Your Code

‍

Gradient Border

‍

Your Info

‍

Your Code

‍

border-gradient

border-gradient + border-block-start

border-gradient + border-block-end

border-gradient + border-inline-end

border-gradient + border-inline-start

Gradient Border 3colors

‍

Your Info

‍

Your Code

‍

border-gradient-3colors

border-gradient-3colors + border-block-start

border-gradient-3colors + border-block-end

border-gradient-3colors + border-inline-end

border-gradient-3colors + border-inline-start

Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6
Mode
Disply Modes

‍

Your Info

‍

Your Code

‍

Accessibility
Accessibility
Styles:
.sr-only.navigable
.sr-only.off-screen
.sr-only.#skip

Learn about accessibility: https://webaim.org/techniques/css/invisiblecontent/

‍

Your Code

‍

.sr-only.navigable

.sr-only (navigable)

.sr-only.off-screen

.sr-only (off-screen

.sr-only (id: skip)

Overflow
overflow--visible
overflow--hidden
overflow--clip
overflow--scroll
overflow--auto
Element
Display
Hide (display none)

‍

Your Info

‍

Your Code

‍

hide (display none)  
hide
hide--tablet
hide--landscape
hide--mobile
Show (display revert )

‍

Your Info

‍

Your Code

‍

show
show--tablet
show--landscape
show--mobile
Element
Type
inline
block
inline-block
Flex
Layouts
flex
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
inline-flex
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
flex--row
Item
Item
Item
flex--row
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
flex--column
Item
Item
Item
flex--cluster
Item
Item
Item
Item
Item
Item
Item
Grid
Layouts
grid
Item
Item
Item
Item
inline-grid
Item
Item
Item
Item
grid--autofit
Item
Item
Item
Item
Item
Item
grid--autofit + max--1fr
Item
Item
Item
Item
Item
Item
Overlay
radial
dark
Section
section-padding-inline
Item
section-padding-block
Item
section-padding-block-sm
Item
section-padding-block-md
Item
section-padding-block-lg
Item
section-padding-block-xlg
Item
section-padding-block-xlg
Item
Padding
Padding Examples
[GS]-Utilities / [GS]-Gradients

‍

Your Code

‍

padding + size-150x
Item
padding-block + size-150x
Item
padding-inline-start + size-150x
Item
padding-block-end + size-150x
Item
Margin
Margin Examples
[GS]-Utilities / [GS]-Spacing

** Helper classes are at the bottom **

‍

Your Code

‍

margin + size-150x
Item
margin-block + size-150x
Item
margin-inline-start + size-150x
Item
margin-block-end + size-150x
Item
Helper
Classes
Sizes

‍

Your Info

‍

Your Code

‍

size-000x
size-013x
size-025x
size-050x
size-075x
size-100x
size-125x
size-150x
size-175x
size-200x
size-250x
size-300x
size-350x
size-400x
size-450x
size-500x
size-dyn-xxsm
size-dyn-xsm
size-dyn-sm
size-dyn-md
size-dyn-lg
size-dyn-xlg
size-dyn-xxlg
Padding

‍

Your Info

‍

Your Code

‍

padding
padding-block
padding-block-start
padding-block-end
padding-inline
padding-inline-start
padding-inline-end
Margin

‍

Your Info

‍

Your Code

‍

margin
margin-block
margin-block-start
margin-block-end
margin-inline
margin-inline-start
margin-inline-end
Static
Sizes
text-size--tiny
text-size--xxsm
text-size--xsm
text-size--sm
text-size--md
text-size--lg
text-size--xlg
text-size--xxlg
text-size--huge
Dynamic
Sizes
text-size--dyn-tiny
text-size--dyn-xxsm
text-size--dyn-xsm
text-size--dyn-sm
text-size--dyn-md
text-size--dyn-lg
text-size--dyn-xlg
text-size--dyn-xxlg
text-size--dyn-huge
Weight
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Styles

text--stroke

text--shadow
This is some text inside of a div block.

text--no-wrap
Alighnment
text-align-start
text-align-center
text-align-end
Transform
text--title-case
text--lower-case
text--all-caps
Decoration
Strikethrough

‍

Your Info

‍

Your Code

‍

text--strikethrough
text--strikethrough-double
text--strikethrough-dotted
text--strikethrough-dashed
text--strikethrough-wavy
Underline

‍

Your Info

‍

Your Code

‍

text--underline
text--underline-double
text--underline-dotted
text--underline-dashed
text--underline-wavy
Overline

‍

Your Info

‍

Your Code

‍

text--overline
text--overline-double
text--overline-dotted
text--overline-dahed
text--overline-wavy
Truncate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros.
‍
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros. Cras risus elit, elementum non dolor eget, consequat faucibus tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros.
‍
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros. Cras risus elit, elementum non dolor eget, consequat faucibus tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros.
‍
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros. Cras risus elit, elementum non dolor eget, consequat faucibus tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros.
‍
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante. Aliquam eget lacinia massa. Aenean non velit pretium, efficitur mi vitae, gravida sem. In hac habitasse platea dictumst. Vivamus consequat massa ultrices, porta purus in, dignissim ipsum. Curabitur non accumsan dolor. Duis justo nisl, pretium ut rutrum ut, convallis eu sapien. Sed fringilla tellus et ante rutrum, sed placerat ligula tempus.Donec sit amet ornare neque. In hac habitasse platea dictumst. Quisque sit amet congue quam. Fusce sit amet blandit enim, eu porta nulla. Phasellus fermentum nunc odio, ut feugiat lectus lacinia vitae. Nullam molestie nec eros quis mollis. Vestibulum gravida nulla ligula, quis ultricies mi auctor id. Maecenas ultricies tortor a diam molestie luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin malesuada nunc a lectus varius sodales. Praesent a rhoncus risus, nec auctor est.Phasellus gravida arcu vitae interdum feugiat. Nam dignissim, libero dapibus aliquam commodo, purus quam porttitor quam, vel vulputate neque nunc in lorem. Sed massa nibh, scelerisque eu sem ut, placerat vehicula nulla. Phasellus bibendum nisl nec velit egestas sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam ac metus vel blandit. Pellentesque sit amet sem at turpis faucibus vehicula. Mauris placerat mi non enim vulputate, vel iaculis justo venenatis. Morbi dapibus elementum leo dapibus congue.Fusce interdum pulvinar elit, eget consequat risus rhoncus ac. Proin augue orci, vehicula sed risus quis, convallis faucibus sem. Donec pellentesque gravida ante ac scelerisque. Aliquam eget euismod lorem. Nunc pulvinar eu risus sit amet pretium. Sed ut elementum eros. Cras risus elit, elementum non dolor eget, consequat faucibus tortor.

Split To Columns
2 columns (split text)

‍

Your Info

‍

Your Code

‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante.
3 columns (split text)

‍

Your Info

‍

Your Code

‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante.
4 columns (split text)

‍

Your Info

‍

Your Code

‍

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci eros, ullamcorper vitae tincidunt id, laoreet id nisi. Etiam hendrerit posuere vehicula. Maecenas malesuada fermentum mollis. Suspendisse potenti. Nullam semper hendrerit ante eget sagittis. Duis id dui purus. Morbi semper, orci auctor dignissim vulputate, arcu ligula sodales lacus, eget fermentum est nulla sed ipsum.Nunc congue aliquam ipsum id lacinia. Maecenas augue lacus, suscipit sed ex varius, accumsan ultrices orci. Praesent a libero tempus, tincidunt metus at, laoreet justo. Phasellus imperdiet metus et posuere volutpat. Suspendisse vel sapien vel nunc lobortis suscipit eget sed est. Pellentesque nisl urna, sollicitudin tincidunt tortor quis, vehicula ultrices libero. Vestibulum facilisis, turpis nec aliquet mollis, tellus leo fringilla ex, at tincidunt eros tellus id dui. Vivamus non fringilla risus, at efficitur ante.
Max
Widths
max-width--10
Item
max-width--10
Item
max-width--20
Item
max-width--25
Item
max-width--30
Item
max-width--35
Item
max-width--40
Item
max-width--45
Item
max-width--50
Item
max-width--55
Item
max-width--60
Item
max-width--65
Item
max-width--70
Item
max-width--75
Item
max-width--80
Item
max-width--85
Item
max-width--90
Item
max-width--95
Item
max-width--100
Item