Clone Now

S2 Framework for Templates

Are you a template creator? Since Webflow doesn’t allow custom code in templates, we built a streamlined one-page S2 Framework tailored for template creation. Customize to make this page your style guide.

Learn more

If you’re not building a template, you can simply delete this page — 100% safe!
But if all you need a one-page Style Guide for your next project, this page serves as a perfect template to customize for your design.

Base Setup

u-base

Utility class for base styles setup. Additional styles can be applied according to your design.

Body
body
u-base

Since custom code is not allowed in Webflow Templates, it is not possible to set fluid values for the root font size to achieve Fluid Responsive typography. The closest alternative is to apply font-size styles to Body with value defined using the clamp() function. This approach applies a fluid responsive font size to text elements that do not have specific font size values set. Visit the docs for more details.

Typography

Headings

Heading levels should follow the correct hierarchy, but styles can be overridden with classes. For example, use h3 to style a Heading 1 element if it is too large for the design.

Heading 1
h1

HTML H1

Heading h1

Text h1
Heading 2
h2

HTML H2

Heading h2

Text h2
Heading 3
h3

HTML H3

Heading h3

Text h3
Heading 4
h4

HTML H4

Heading h4

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h7
.h7 is just a class

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h8
.h8 is just a class

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text

text-3xl

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

text-2xl

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

text-xl

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.

text-lg

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.

text-base
font-size: 1rem
line-height: 1.5
(same as body by default)

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.

text-sm

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.

text-xs

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.

text-2xs

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.

Paragraph
font-size: not set
line-height: not set

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.

Body
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.

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_image-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, eros dolor interdum nulla.
  • Lorem ipsum
Unordered Lists
list-none / list-h
  • Lorem ipsum dolor sit amet
  • 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 Lists
list-custom
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
Ordered Lists
list-custom
  1. Sed posuere consectetur est at lobortis.
  2. Sed posuere consectetur est at lobortis.
  3. Sed posuere consectetur est at lobortis.
list-custom
cc-p-0
Sed posuere consectetur est at lobortis.
Sed posuere consectetur est at lobortis.
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

S2 version Framework version Title

S2 version Framework version Title

Lorem ipsumTM dolor sit amet, consectetur adipiscing elit. Suspendissevarius enim in eros elementum tristique. Duis cursus, mi quis viverraornare, eros dolor.

code-block
wrapped with block cc-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

Main colors under the "Colors" variable group. See all colors on the variables panel.

brand
(500)
brand-alt
(500)
accent
(500)

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
cc-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
cc-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
cc-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
cc-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
cc-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
cc-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
cc-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
cc-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
cc-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
cc-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
cc-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
cc-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 cc-xl
Heading inside a title-wrapper cc-lg
Heading inside a title-wrapper
Heading inside a title-wrapper cc-sm
Heading inside a title-wrapper cc-xs
Heading inside a title-wrapper cc-2xs
Heading inside a title-wrapper cc-0
title-wrapper
cc-align-center

This is a centered heading.

Another heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-wrapper
cc-max-40rem
cc-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
cc-align-center

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

button-wrapper
cc-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 cc-1x1 / cc-4x3 / cc16x9
image
image
image
image-wrapper
image cc-contain
image

Spacer

Spacers are useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.

Spacer
enter height values in properties for different breakpoints

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-brand
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-uppercase
Lorem ipsum dolor sit amet.
u-text-lowercase
Lorem ipsum dolor sit amet.
u-text-capitalize
Lorem ipsum 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-brand
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

Other Utilities

Some other useful utilities.

u-hide
u-hide_md
u-hide_sm
u-hide_xs
u-align-center
u-height-100vh
u-height-100dvh
u-height-100svh
100vh
100dvh
100svh

Elements

Buttons

Use combo classes to create button style variations.

button
Learn more
button
cc-sm
Learn more
button
cc-xs
Go
button
cc-white
cc-sm
cc-white
cc-xs
cc-white
Learn more
Learn more
Go
button
cc-outline
Learn more
button
cc-sm
cc-outline
Learn more
button
cc-xs
cc-outline
Learn more
button
cc-white-outline
cc-sm
cc-white-outline
cc-xs
cc-white-outline
Learn more
Learn more
Go
cta-wrapper
Learn more
Button
Learn more
Call our sales team
Button-Outline
Learn more
How to use?
Button-Text
Learn more
Read article
Button-Link
Learn more
Apply now
pill
Learn more
All systems normal
Messages (2)
Special Offer
Join our beta program

Icons

The base icon is 1.125em x 1.125em (units in em, not rem).

icon
icon
icon
cc-1em
icon
cc-rem
icon
cc-1rem
icon
cc-image
icon
cc-image-1rem
width is auto (suitable for images)
for SVG, you should wrap it with an element that has a width value
S2 Framework's brand logoS2 Framework's brand logoS2 Framework's brand logoS2 Framework's brand logoS2 Framework's brand logoS2 Framework's brand logoS2 Framework's brand logoS2 Framework's brand logoS2 Framework's brand logo
icon
cc-mini
icon-wrapper
for flexibility, wrap an icon with icon-wrapper before converting to component

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.
cc-callout
This is a "Callout" block.
cc-success
This is a "Success" message block.
cc-highlight
This is a "Highlight" message block.
cc-warning
This is a "Warning" message block.
cc-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.
Placing an "info" block inside a message block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.

Forms

Contact Forms

form-wrapper
form
form_row
input-field
Label
input
input
cc-select
input
cc-textarea
checkbox-field
checkbox
radio-field
radio
option-field
option
Grouped as Components to prevent Webflow from accidentally changing form 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.

Tables

grid-table
cc-c
cc-th
Header Cell
Header Cell
Header Cell
Header Cell
cc-rth
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell

Other

Other useful UI elements.

title-layout

Title Layouts

Title Layouts title-layout greatly speed up your web design process by eliminating the need to repeatedly create classes for headings or titles. You can customize them in your early design process.

Our services and capabilities

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.

Our services and capabilities

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.

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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

About our company

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.

Recruitment of IT professionals in the region

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.

Our Executives

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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Our Management

The best team in the industry.

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.

Value

Our value guides our businesses

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.

Lorem ipsum dolor sit amet

Flexible workforce solutions for sustainable business success

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.

Elements of Title Sets

title-heading

Flexible workforce solutions for sustainable business success

title-heading
cc-lg

Flexible workforce solutions for sustainable business success

title-heading
cc-xl

Flexible workforce solutions

title-heading
cc-2xl

Flexible workforce solutions

title-heading
cc-3xl

Flexible workforce solutions

title-message
Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.
title-message
cc-sm
Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.
title-message
cc-xs
Lorem ipsum dolor sit elit adipiscing diam libero vitae erat.
title-eyebrow
Lorem ipsum dolor sit amet
dot
tag
New feature
Beta
Tag content in a div
card
card
cc-heavy

Card heading

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

This is a card title.

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.

Card heading

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

box-label

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.

Column Layouts

cols-layout
col
cc-aside
col
cc-main
main
main
main
main
main
main
cols-layout
cc-vflex-at-md
col
cc-45p
col
col
col
cc-1c
~
cc-12c
col
col
col
col
col
col
col
col
col
col
col
col
flex-wrap-cols
col
cc-in-flex
col
col
col
grid-cols
col
cc-content
col
cc-p-responsive

Heading

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

col
grid-cols
cc-3col
col
cc-p-0
col
col
col
grid-cols
cc-4col
col
cc-p-0
col
col
col
col
grid-cols
cc-h
note: -h for horizontal

Grid Layout Utilities

This Grid Layout utilities system is a streamlined version of Lumos by Timothy Ricks.
Grids can use values like subgrid or autofit.

u-grid-custom
example: u-grid-3col
example: u-grid-4col
u-grid-autofit
u-grid-sub
u-col
u-col-full

Rich Text Element

richtext
richtext
cc-richtext-lg
Adding combo class to rich text elements is a bit tricky. You need to create and add styles to a combo class first.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Styling lists:

  • 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.
      • 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 dolor sit amet, consectetur adipiscing elit.

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

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

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

This is a heading with sup and sub for size checking.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Ut enim ad Minim VeniamTM, quis nostrud28 exercitationullamco laboris nisiut aliquip ex ea commodo consequat. Duisaute, irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit c amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utabore. This is <code> inside some content: Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros, ut enim ad minim veniam.

‍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 et dolore magna aliqua. Ut enim ad minim veniam.

futuristic tunnel

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

futuristic tunnel
This is a short caption.

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

futuristic tunnel
futuristic tunnel

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

futuristic tunnel
This is a caption.
futuristic tunnel
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.

futuristic tunnel

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

futuristic tunnel

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.

futuristic tunnel
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 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 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 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Styling lists:

  • 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.
      • 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 dolor sit amet, consectetur adipiscing elit.

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

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

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

This is a heading with sup and sub for size checking.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Ut enim ad Minim VeniamTM, quis nostrud28 exercitationullamco laboris nisiut aliquip ex ea commodo consequat. Duisaute, irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit c amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utabore. This is <code> inside some content: Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros, ut enim ad minim veniam.

‍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 et dolore magna aliqua. Ut enim ad minim veniam.

futuristic tunnel

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

futuristic tunnel
This is a short caption.

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

futuristic tunnel
futuristic tunnel

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

futuristic tunnel
This is a caption.
futuristic tunnel
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.

futuristic tunnel

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

futuristic tunnel

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.

futuristic tunnel
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 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 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 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Starter Page Structure

This template follows the page structure recommended by the S2 Framework but remains independent of any custom code. It serves as the perfect starting point for crafting your next Webflow Template masterpiece.

Tip: The main wrapper of the page SHOULD NOT include the nav and footer, and a page should always have a Main HTML tag.