Clone Now

UI Elements

Elements

Light / Dark Mode Switching

Light / Dark Mode (Theme) Switching.

toggle
data-toggle=""
data-button=""
body
u-light-mode
/
u-dark-mode
apply mode styles to a page
Content of Light Mode color styles.
Content of Dark Mode color styles.
S2 Framework includes a powerful Light / Dark Mode Switching feature that utilizes Webflow's variable modes. It's easy to set up, and also makes managing colors across modes effortless.
The scripts for applying and switching modes (via CDN) are placed in the global head code.
The default mode is "Follow system". To set a specific default mode for a page, add attribute theme-default="light" or theme-default="dark" to the Body element. If you want Webflow Designer to display the page in dark mode, add the u-dark-mode utility class to body.

Buttons

Use combo classes to create button style variations.

button
Learn more
button
cc-sm
Explore
button
cc-xs
Go
button
cc-white
cc-sm
cc-white
cc-xs
cc-white
Learn more
Explore
Go
button
cc-inverted
cc-sm
cc-inverted
cc-xs
cc-inverted
Learn more
Explore
Go
button
cc-outline
Learn more
button
cc-sm
cc-outline
Explore
button
cc-xs
cc-outline
Go
button
cc-white-outline
cc-sm
cc-white-outline
cc-xs
cc-white-outline
Learn more
Explore
Go
button
cc-inverted-outline
cc-sm
cc-inverted-outline
cc-xs
cc-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
an icon library will load only when set to "Visible" — configure inside Global Code component
Font Awesome Free: Solid, Regular, Brands
   
Icon
Icon: Wrapped
customize color options by using Component variants
icon
cc-1em
the size of icons can be changed by adding combo classes to icon or through parent elements
icon
cc-1rem
icon
cc-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
cc-mini
icon
cc-100p
icon-wrapper
cc-primary
modify the wrapper to give icons colors
icon-wrapper
cc-circle
cc-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. 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.

Card

card
card
cc-heavy
card
cc-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

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

Others

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

Tables

HTML table and Gird table.

html-table
Plan Capabilities
Starter Site plan 30 → 60 Fields per Collection
5 → 10 References per Collection
CMS Site plan 30 → 60 Fields per Collection
5 → 10 References per Collection
Business Site plan 150 → 300 static pages
Growth Workspace plan NEW shareable Library of components and variables
Agency Workspace plan NEW shareable Library of components and variables
Basic CMS Business
Bandwidth 50GB → 10GB 200GB → 50GB 400GB → 100GB
Table caption: Our first front-end web developer course
Person Most interest in Age
Chris HTML tables 22
Dennis Web accessibility 45
Sarah JavaScript frameworks 29
Karen Web performance 36
Average age 33
html-table
Works perfectly with tables generated by the Finsweet Table App. Simply wrap the table with an html-table div.
Header Header Header Header
Cell Cell Cell Cell
Cell Cell Cell Cell
Cell Cell Cell Cell
Cell Cell Cell Cell
Footer Footer Footer Footer
Example caption: This is a table generated by the Finsweet Table App!
html-table
scrollable
default max-height is 5 rows when using scrollable attribute without a value
matrix col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10 col 11 col 12
row 1 cell 1 - 1 cell 1 - 2 cell 1 - 3 cell 1 - 4 cell 1 - 5 cell 1 - 6 cell 1 - 7 cell 1 - 8 cell 1 - 9 cell 1 - 10 cell 1 - 11 cell 1 - 12
row 2 cell 2 - 1 cell 2 - 2 cell 2 - 3 cell 2 - 4 cell 2 - 5 cell 2 - 6 cell 2 - 7 cell 2 - 8 cell 2 - 9 cell 2 - 10 cell 2 - 11 cell 2 - 12
row 3 cell 3 - 1 cell 3 - 2 cell 3 - 3 cell 3 - 4 cell 3 - 5 cell 3 - 6 cell 3 - 7 cell 3 - 8 cell 3 - 9 cell 3 - 10 cell 3 - 11 cell 3 - 12
row 4 cell 4 - 1 cell 4 - 2 cell 4 - 3 cell 4 - 4 cell 4 - 5 cell 4 - 6 cell 4 - 7 cell 4 - 8 cell 4 - 9 cell 4 - 10 cell 4 - 11 cell 4 - 12
row 5 cell 5 - 1 cell 5 - 2 cell 5 - 3 cell 5 - 4 cell 5 - 5 cell 5 - 6 cell 5 - 7 cell 5 - 8 cell 5 - 9 cell 5 - 10 cell 5 - 11 cell 5 - 12
row 6 cell 6 - 1 cell 6 - 2 cell 6 - 3 cell 6 - 4 cell 6 - 5 cell 6 - 6 cell 6 - 7 cell 6 - 8 cell 6 - 9 cell 6 - 10 cell 6 - 11 cell 6 - 12
row 7 cell 7 - 1 cell 7 - 2 cell 7 - 3 cell 7 - 4 cell 7 - 5 cell 7 - 6 cell 7 - 7 cell 7 - 8 cell 7 - 9 cell 7 - 10 cell 7 - 11 cell 7 - 12
row 8 cell 8 - 1 cell 8 - 2 cell 8 - 3 cell 8 - 4 cell 8 - 5 cell 8 - 6 cell 8 - 7 cell 8 - 8 cell 8 - 9 cell 8 - 10 cell 8 - 11 cell 8 - 12
html-table
scrollable="6"
th-sticky
matrix col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10 col 11 col 12
row 1 cell 1 - 1 cell 1 - 2 cell 1 - 3 cell 1 - 4 cell 1 - 5 cell 1 - 6 cell 1 - 7 cell 1 - 8 cell 1 - 9 cell 1 - 10 cell 1 - 11 cell 1 - 12
row 2 cell 2 - 1 cell 2 - 2 cell 2 - 3 cell 2 - 4 cell 2 - 5 cell 2 - 6 cell 2 - 7 cell 2 - 8 cell 2 - 9 cell 2 - 10 cell 2 - 11 cell 2 - 12
row 3 cell 3 - 1 cell 3 - 2 cell 3 - 3 cell 3 - 4 cell 3 - 5 cell 3 - 6 cell 3 - 7 cell 3 - 8 cell 3 - 9 cell 3 - 10 cell 3 - 11 cell 3 - 12
row 4 cell 4 - 1 cell 4 - 2 cell 4 - 3 cell 4 - 4 cell 4 - 5 cell 4 - 6 cell 4 - 7 cell 4 - 8 cell 4 - 9 cell 4 - 10 cell 4 - 11 cell 4 - 12
row 5 cell 5 - 1 cell 5 - 2 cell 5 - 3 cell 5 - 4 cell 5 - 5 cell 5 - 6 cell 5 - 7 cell 5 - 8 cell 5 - 9 cell 5 - 10 cell 5 - 11 cell 5 - 12
row 6 cell 6 - 1 cell 6 - 2 cell 6 - 3 cell 6 - 4 cell 6 - 5 cell 6 - 6 cell 6 - 7 cell 6 - 8 cell 6 - 9 cell 6 - 10 cell 6 - 11 cell 6 - 12
row 7 cell 7 - 1 cell 7 - 2 cell 7 - 3 cell 7 - 4 cell 7 - 5 cell 7 - 6 cell 7 - 7 cell 7 - 8 cell 7 - 9 cell 7 - 10 cell 7 - 11 cell 7 - 12
row 8 cell 8 - 1 cell 8 - 2 cell 8 - 3 cell 8 - 4 cell 8 - 5 cell 8 - 6 cell 8 - 7 cell 8 - 8 cell 8 - 9 cell 8 - 10 cell 8 - 11 cell 8 - 12
html-table
scrollable="x"
matrix col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10 col 11 col 12
row 1 cell 1 - 1 cell 1 - 2 cell 1 - 3 cell 1 - 4 cell 1 - 5 cell 1 - 6 cell 1 - 7 cell 1 - 8 cell 1 - 9 cell 1 - 10 cell 1 - 11 cell 1 - 12
row 2 cell 2 - 1 cell 2 - 2 cell 2 - 3 cell 2 - 4 cell 2 - 5 cell 2 - 6 cell 2 - 7 cell 2 - 8 cell 2 - 9 cell 2 - 10 cell 2 - 11 cell 2 - 12
row 3 cell 3 - 1 cell 3 - 2 cell 3 - 3 cell 3 - 4 cell 3 - 5 cell 3 - 6 cell 3 - 7 cell 3 - 8 cell 3 - 9 cell 3 - 10 cell 3 - 11 cell 3 - 12
row 4 cell 4 - 1 cell 4 - 2 cell 4 - 3 cell 4 - 4 cell 4 - 5 cell 4 - 6 cell 4 - 7 cell 4 - 8 cell 4 - 9 cell 4 - 10 cell 4 - 11 cell 4 - 12
row 5 cell 5 - 1 cell 5 - 2 cell 5 - 3 cell 5 - 4 cell 5 - 5 cell 5 - 6 cell 5 - 7 cell 5 - 8 cell 5 - 9 cell 5 - 10 cell 5 - 11 cell 5 - 12
row 6 cell 6 - 1 cell 6 - 2 cell 6 - 3 cell 6 - 4 cell 6 - 5 cell 6 - 6 cell 6 - 7 cell 6 - 8 cell 6 - 9 cell 6 - 10 cell 6 - 11 cell 6 - 12
row 7 cell 7 - 1 cell 7 - 2 cell 7 - 3 cell 7 - 4 cell 7 - 5 cell 7 - 6 cell 7 - 7 cell 7 - 8 cell 7 - 9 cell 7 - 10 cell 7 - 11 cell 7 - 12
row 8 cell 8 - 1 cell 8 - 2 cell 8 - 3 cell 8 - 4 cell 8 - 5 cell 8 - 6 cell 8 - 7 cell 8 - 8 cell 8 - 9 cell 8 - 10 cell 8 - 11 cell 8 - 12
html-table
scrollable="y"
default max-height is 5 rows when the value is y
matrix col 1 col 2 col 3
row 1 cell 1 - 1 cell 1 - 2 cell 1 - 3
row 2 cell 2 - 1 cell 2 - 2 cell 2 - 3
row 3 cell 3 - 1 cell 3 - 2 cell 3 - 3
row 4 cell 4 - 1 cell 4 - 2 cell 4 - 3
row 5 cell 5 - 1 cell 5 - 2 cell 5 - 3
row 6 cell 6 - 1 cell 6 - 2 cell 6 - 3
row 7 cell 7 - 1 cell 7 - 2 cell 7 - 3
row 8 cell 8 - 1 cell 8 - 2 cell 8 - 3
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
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.

See all Title Layouts
tag
New feature
Beta
NEW
Tag content in a div
dot

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.

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

dot
pulse-bg
/
pulse-bg-

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

Code
code-label
tag-label

Tags: code tag code label class label attribute label component label html label

Primary Secondary Accent

animation="pulse"
animation="pulse-bg"
pulse
pulsepulse
pulse-bg
/
pulse-bg-
pulse-bgpulse-bg-1