Clone Now

Style Guide

Style guide and elements for the website.

Powered by the S2 Framework v3.1.0.

Typography

S2 uses Fluid Type Scale for the headings, Body, and text classes.

Headings

Heading levels should follow the correct semantic hierarchy on a page, but you can override styles using classes. For example, you can use the h3 class to style a Heading 1 element if it is too large for the design.

Heading 1
h1

HTML H1

Text h1
Heading 2
h2

HTML H2

Text h2
Heading 3
h3

HTML H3

Text h3
Heading 4
h4

HTML H4

Text h4
Heading 5
h5
HTML H5
Text h5
Heading 6
h6
HTML H6
Text h6

The same as base text size.

h7
.h7 is an arbitrary class invented to style small headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h8
.h8 is an arbitrary class invented to style small headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

eyebrow
Eyebrow

This is a H4 title for demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text

text-3xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

text-2xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

text-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

text-lg

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

text-base
font-size and line-height are the same as Body

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

text-sm

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

text-xs

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

text-2xs

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

text-3xs

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

Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique. Duis cursus, mi quis viverra ornare.
Paragraph
font-size: not set
line-height: not set

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

Lists

Unordered Lists
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Ordered Lists
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list
spaced list items
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list-item_icon
use a combo class to change the background-image for the bullets
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra ornare.
Unordered Lists
list-none
/
list-h
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
list-custom
Unordered / Ordered Lists
list-custom
list-custom_item
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
list-custom_item
is-flex
Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Sed posuere consectetur est at lobortis

Other Typography Elements

Other default typography elements with modified styles.

Block Quote
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.
Links
Text Link
Text in Link Block
Superscript
Subscript

Text Sup Text Sub H1

Text Sup Text Sub H2

Text Sup Text Sub H3

Text Sup Text Sub H4

Text Sup Text Sub H5
Text Sup Text Sub H6

Lorem ipsum TM dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementumwithout space. Duis cursus, mi quis viverrawithout space, eros dolor.

code-block
wrapped with block is-full in the example as it needs a wrapper with width value
1<h3>Code Block Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula.</p>
3<p>Lorem ipsum eget dolor aenean massa.</p>
4<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
5<p>Lorem ipsum eget dolor massa.</p>

Presets

Colors

Modify, add, or rename the Extended Colors to align with your brand.

Core colors (manage in Palettes):
Primary
Secondary
Accent
Extended colors:
Ext. 01
Ext. 02
Ext. 03
Ext. 04
Ext. 05
Ext. 06
Ext. 07
Ext. 08
Ext. 09
Ext. 10
Ext. 11
Ext. 12
Additional core colors:
Text
Text Muted
Text Dim
Text Dimmer
Stroke
Stroke Subtle
Stroke Emphasis
Surface
Surface Muted
Surface Alt
Surface Alt Muted
Focus
Focus Subtle

Palettes

The Primary, Secondary, Accent, and Neutral colors follow a 12-step tint setup. Use a generator to easily create the tints, then edit here or on the Variables panel.

Primary
on light
on base
on deep
subtle
50
100
200
300
400
500
600
700
800
900
950
Secondary
on light
on base
on deep
subtle
50
100
200
300
400
500
600
700
800
900
950
Accent
on light
on base
on deep
subtle
50
100
200
300
400
500
600
700
800
900
950
Neutral
on light
on base
on deep
subtle
surface
surface-muted
surface-alt
surface-alt-muted
white (Palette)
black (Palette)
50
100
200
300
400
500
600
700
800
900
950

Structure

Sections

Use the section class with its combo classes for all your sections to maintain consistency.

section

Heading

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.

section
is-bg-surface

Heading

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.

section
is-top-0

Heading

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.

section
is-bottom-0

Heading

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.

section
is-top-bottom-0

Heading

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.

section
is-top-sm

Heading

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.

section
is-bottom-sm

Heading

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.

section
is-top-bottom-sm

Heading

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.

section
is-top-lg

Heading

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.

section
is-bottom-lg

Heading

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.

Containers

Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.

container

Heading

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.

container
is-10c

Heading

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.

container
is-8c

Heading

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.

container
is-6c

Heading

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.

container
is-full

Heading

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.

Wrappers

Heading and Paragraph elements are typically wrapped with title-wrapper or text-wrapper to access combo classes for styling.

title-wrapper
Heading inside a title-wrapper is-xl
Heading inside a title-wrapper is-lg
Heading inside a title-wrapper
Heading inside a title-wrapper is-sm
Heading inside a title-wrapper is-xs
Heading inside a title-wrapper is-2xs
Heading inside a title-wrapper is-0
title-wrapper
is-align-center

This is a centered heading.

Another heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-wrapper
is-max-40rem
is-max-20rem

Some heading

This paragraph is wrapped by a text-wrapper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Some heading

This paragraph is wrapped by a text-wrapper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-wrapper
is-align-center

This paragraph is wrapped by a text-wrapper and centered.

button-wrapper
is-center

Action now!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Join the club
Learn more
image-wrapper
image is-1x1 / is-4x3 / is-16x9
a demo image
a demo image
a demo image
image-wrapper
image is-contain
a demo image
full-wrapper
full-cover
blue waves

Spacer

Spacers are useful when you need some extra space in a layout quickly.

Spacer
input height values in properties for different breakpoints

Other Elements

video-wrapper
video
bg-video
richtext-block
matching the font size and spacing between Rich Text elements

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.

Result: Matched font size and spacing between richtext elements.

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.

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.

Result: Matched font size and spacing between richtext is-richtext-lg elements.

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.

Utilities

u- prefix to separate them from base styles. They can work on their own, but usually you use them to modify a base element, like a title-wrapper.

Text Colors Utilities

u-text-base
Lorem ipsum dolor sit amet.
u-text-mu
Lorem ipsum dolor sit amet.
u-text-primary
Lorem ipsum dolor sit amet.
u-text-stroke
Lorem ipsum dolor sit amet.

Font Utilities

Font utilities change the font and weight of an element.

u-font-regular

Lorem ipsum dolor sit amet.

u-font-bold

Lorem ipsum dolor sit amet.

u-font-italic

Lorem ipsum dolor sit amet.

Alignment Utilities

Use to align text in layouts, or individual text elements.

u-text-left

Lorem ipsum dolor sit amet.

u-text-center

Lorem ipsum dolor sit amet.

u-text-right

Lorem ipsum dolor sit amet.

Other Text Utilities

Other utilities for quick text styling.

u-text-underline
Lorem ipsum dolor sit amet.
u-text-strike
Lorem ipsum dolor sit amet.
u-text-no-deco
This is a link dolor sit amet.
u-text-nowrap
Lorem ipsum

Background Utilities

u-bg-surface
background and text styles are applied
Lorem ipsum dolor sit amet.
This is some text inside of a div block.
u-bg-primary
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in eros elementum tristique.

Lorem ipsum
This is some text inside of a div block.

Flex Utilities

Timothy Ricks developed an incredible presentation of flex properties on Lumos – a huge shout out for that. We simplified the structure a bit and made a few small modifications.

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-stretch
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-bottom
u-vflex-left-between
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

Miscellaneous Utilities

Some other useful utilities.

u-hide
u-hide_md
u-hide_sm
u-hide_xs
u-container-cqw
Establishes a query container for dimensional queries.
Demo of responsive font size using cqw

UI Elements

Buttons

Use combo classes to create button style variations.

button
Learn more
button
is-sm
Explore
button
is-xs
Go
button
is-white
is-sm
is-white
is-xs
is-white
Learn more
Explore
Go
button
is-inverted
is-sm
is-inverted
is-xs
is-inverted
Learn more
Explore
Go
button
is-outline
Learn more
button
is-sm
is-outline
Explore
button
is-xs
is-outline
Go
button
is-white-outline
is-sm
is-white-outline
is-xs
is-white-outline
Learn more
Explore
Go
button
is-inverted-outline
is-sm
is-inverted-outline
is-xs
is-inverted-outline
Learn more
Explore
Go
Button
Learn more
Call our sales team
Button: Outline
Learn more
How it works?
Button: Text
Learn more
Read article
Button: Link
Learn more
Apply now
pill
Default
Primary
Primary Inverse
Surface
Slim
UI/UX Design
Environment
Learn more
System status
Messages (2)
Special Offer
Join our beta program

Icons

The base icon is 1em x 1em, allowing it to scale. The font size is not set.

icon
icon
is-1em
the size of icons can be changed by adding combo classes to icon or through parent elements
icon
is-1rem
icon
is-image-1rem
width is auto (suitable for images) and use rem for height
for SVG images, you should wrap it with an element that has a width value
icon
is-mini
icon
is-100p
icon-wrapper
is-primary
modify the wrapper to give icons colors
icon-wrapper
is-circle
is-lead

Task completed

We are dog friendly! Suspendisse varius enim in eros elementum tristique.

Woof Woof

Message & Info Blocks

message
This is a message block.
Message block that has an icon wrapped by a Custom Element with custom styles. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, quis viverra ornare.
is-callout
This is a "Callout" block.
is-success
This is a "Success" message block.
is-highlight
This is a "Highlight" message block.
is-warning
This is a "Warning" message block.
is-note
This is a "Note" message block.
info
This is an "info" block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Placing an "info" block inside a message block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
🦊
Placing an "info" block inside a message block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.

Card

card
card
is-heavy
card
is-p-0

Card heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

This is a card title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

Heavy style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

box-label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

blue waves

Card Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

no padding

Slider

slider-wrapper
slider
demo image
demo image

Tabs

tabs
Tab 01
Tab 02
Tab 03

Tab 01

Base classes for tabs that you can easily customize.

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.

Tab 02

Base classes for tabs that you can easily customize.

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.

Tab 03

Base classes for tabs that you can easily customize.

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.

Avatar

avatar-wrapper
avatar
badge
adjust size on avatar-wrapper and apply colors on avatar
S2
S2
S2
S2
S2
S2
S2
S2
S2
S2
S2
S2
S2
S2
1
S2
S2
68
S2
S2
S2
1
2
3
4
S2
36k+ members
36k+ members

Bento Layout

A clean, flexible, flex-based Bento Layout system that's easy to build and manage. The gap size is easily adjustable via a variable.
Cloneable example

bento
bento-col
u-2c
~
u-10c
,
u-grow

Other

Other useful UI elements.

title-layout
Unleash potentials

Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.

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.

tag
New feature
Beta
NEW
Tag content in a div
dot

Forms

Contact Forms

form-wrapper
form
form_row
input-field
Label
input
input
is-select
input
is-textarea
checkbox-field
checkbox
radio-field
radio
option-field
option
The forms are grouped as Components to prevent Webflow from accidentally changing their settings during copy and paste.

Form Demo A

Checkboxes
Checkboxes: Option style
Radio buttons
Radio buttons: Checkmark style
Radio buttons: Option style
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Demo B

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Column Layouts

col-wrapper

col-wrapper
you can use col-wrapper to wrap col elements with combo classes such as is-span-12, is-12c, and is-grow for column-based layouts
col
A few examples:
is-span-2
is-span-3
is-span-1
is-span-2
is-span-4
is-4c
is-6c
is-2c
is-grow
is-grow
is-grow
col
is-span-
the is-span- classes reference to the closest parent element that has container inline size defined
Base
Tablet
Landscape
Mobile
col
is-span-1
~
is-span-12
for base: 12 cols
is-span-1
is-span-2
is-span-3
is-span-4
is-span-5
is-span-6
is-span-7
is-span-8
is-span-9
is-span-10
is-span-11
is-span-12
col
is-span-1-md
~
is-span-8-md
for tablet: 8 cols
is-span-1-md
is-span-2-md
is-span-3-md
is-span-4-md
is-span-5-md
is-span-6-md
is-span-7-md
is-span-8-md
col
is-span-1-sm
~
is-span-6-sm
for landscape: 6 cols
is-span-1-sm
is-span-2-sm
is-span-3-sm
is-span-4-sm
is-span-5-sm
is-span-6-sm
col
is-span-1-xs
~
is-span-4-xs
for mobile: 4 cols
is-span-1-xs
is-span-2-xs
is-span-3-xs
is-span-4-xs
Combo Classes
Utility Classes
col
is-1c
~
is-12c
12-column system based just on the parent's width
is-1c
is-2c
is-3c
is-4c
is-5c
is-6c
is-7c
is-8c
is-9c
is-10c
is-11c
is-12c
u-1c
~
u-12c
equivalent utility classes with only width styles applied
u-1c
u-2c
u-3c
u-4c
u-5c
u-6c
u-7c
u-8c
u-9c
u-10c
u-11c
u-12c

flex-cols

flex-cols
col
is-aside
col
is-main
main
main
main
main
flex-cols
is-vflex-at-md
col
is-45p
col
col

grid-cols

grid-cols
col
is-content
col
is-p-responsive

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

col
grid-cols
is-3col
col
is-p-0
col
col
col
grid-cols
is-4col
col
is-p-0
col
col
col
col
grid-cols
is-row

Rich Text Element

richtext
default class to style Rich Text element
richtext
is-richtext-lg
Adding combo class to Rich Text elements can be tricky. You have to create and apply styles to is-richtext-lg directly as if styling a utility class.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vain eros elementum tristique.

Bold style, italic style and bold italic style.

Link inside rich text element. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Styling lists:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum elit dolore magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et aliqua.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H5 heading with sup and sub for demo.

Lorem ipsumTM dolor sit amet, consectetursup text adipiscing elit, sed do eiusmodsub text incididunt agna aliqua. E=MC2 🚀

Adding a code tag for demo purpose.

Testing long context with the code tag: Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros, ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blue waves
blue waves

Lorem ipsum dolor sit amet, consectet elit. Suspendisse varius enim in eros elementum tristique.

blue waves
This is a short caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in eros elementum tristique.

blue waves
blue waves

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in eros elementum tristique.

blue waves
This is a caption.
blue waves
This is a long caption after an image with caption. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

blue waves

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

blue waves

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.

blue waves
Align to right and also have a caption.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vain eros elementum tristique.

Bold style, italic style and bold italic style.

Link inside rich text element. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Styling lists:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum elit dolore magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et aliqua.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H5 heading with sup and sub for demo.

Lorem ipsumTM dolor sit amet, consectetursup text adipiscing elit, sed do eiusmodsub text incididunt agna aliqua. E=MC2 🚀

Adding a code tag for demo purpose.

Testing long context with the code tag: Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros, ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blue waves
blue waves

Lorem ipsum dolor sit amet, consectet elit. Suspendisse varius enim in eros elementum tristique.

blue waves
This is a short caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in eros elementum tristique.

blue waves
blue waves

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in eros elementum tristique.

blue waves
This is a caption.
blue waves
This is a long caption after an image with caption. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

blue waves

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

blue waves

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.

blue waves
Align to right and also have a caption.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Starter Page Structure

This Starter Page Structure follows the structure recommended by the S2 Framework and is independent of any custom code. It serves as the perfect starting point for crafting your next Webflow template.

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.