UI Elements

Elements

Light / Dark Mode Switching

toggle
data-toggle=""
data-button=""

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

Form

form-wrapper
form
form_row
input-field
Label
input
input
cc-select
input
cc-textarea
checkbox-field
checkbox
radio-field
radio
option-field
option

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.

Message & Info Blocks

message
This is a message block.
Message block that has an icon with float="start" attribute. 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.

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

animation="pulse"
animation="pulse-bg"
pulse
pulsepulse
pulse-bg
/
pulse-bg-
pulse-bgpulse-bg-1pulse-bg-2pulse-bg-3
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.