Label
label
r1
txt
Label
label
r1
icn
default
label
r1
icn-left
default
Label
label
r1
icn-right
Label
default
label-stack
r1
icn-top
default
Label
label-stack
r1
icn-btm
Label
default
label
r2
txt
Label
label
r2
icn
default
label
r2
icn-left
default
Label
label
r2
icn-right
Label
default
label-stack
r2
icn-top
default
Label
label-stack
r2
icn-btm
Label
default
label
r3
txt
Label
label
r3
icn
default
label
r3
icn-left
default
Label
label
r3
icn-right
Label
default
label-stack
r3
icn-top
default
Label
label-stack
r3
icn-btm
Label
default
label
r4
txt
Label
label
r4
icn
default
label
r4
icn-left
default
Label
label
r4
icn-right
Label
default
label-stack
r4
icn-top
default
Button
label-stack
r4
icn-btm
Button
default
Button
1. Copy/Paste Component
2. Alter Component Properties & Icons (Gear Icon)
3. Unlink Component, releasing it from its template (Right Click > Unlink Instance)
Line Neutral
btnstack-[size]
u-btn-line-neutral
Badge
3
3
act_edit_f
Badge
badge-[size]
3
3
act_edit_f
Badge - Status
badge-[size]
u-badge-avail
u-badge-away
u-badge-act
Image
Image
img-[size]
cc-rounded
Image Group
imggroup-[size]
cc-rounded
cc-group
Avatar
act_edit_f
3
Avatar
avatar-[size]
Avatar Group
avtgroup-[size]
AdaptIcon
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
default_f
AdaptIcon
adpt-[size]
cc-circle
cc-squircle
cc-rounded
AdaptIcon Group
adptgroup-[size]
cc-rounded
cc-group
Chip
Paragraph
Body copy here lorem ipsum dolor sit amet, cosectetu
Body copy here lorem ipsum dolor sit amet, consectetur
Body copy here lorem ipsum dolor sit amet, consectetur
Body copy here lorem ipsum dolor sit amet, consectetur
Paragraph - Left (default)
paragraph-[size]
cc-left
Body copy here lorem ipsum dolor sit amet, consectet
Body copy here lorem ipsum dolor sit amet, consectetur
Body copy here lorem ipsum dolor sit amet, consectetur
Body copy here lorem ipsum dolor sit amet, consectetur
Paragraph - Center
paragraph-[size]
cc-center
Body copy here lorem ipsum dolor sit amet, consectet
Body copy here lorem ipsum dolor sit amet, consectetur
Body copy here lorem ipsum dolor sit amet, consectetur
Body copy here lorem ipsum dolor sit amet, consectetur
Paragraph - Right
paragraph-[size]
cc-right
Headline
Huge - Headline
Subhead description below
XLarge - Headline
Subhead description below
Large - Headline
Subhead description below
Medium - Headline
Subhead description below
Small - Headline
Subhead description below
XSmall - Headline
Subhead description below
Headline - Left (default)
headline-[size]
cc-left
Huge - Headline
Subhead description below
XLarge - Headline
Subhead description below
Large - Headline
Subhead description below
Medium - Headline
Subhead description below
Small - Headline
Subhead description below
XSmall - Headline
Subhead description below
Headline - Center
headline-[size]
cc-center
Huge - Headline
Subhead description below
XLarge - Headline
Subhead description below
Large - Headline
Subhead description below
Medium - Headline
Subhead description below
Small - Headline
Subhead description below
XSmall - Headline
Subhead description below
Headline - Right
headline-[size]
cc-right
Section Header
Small - Section Name
XSmall - Section Name
Tiny - Section Name
Section Header - Left (default)
sheader-[size]
cc-left
Section Header - Center
sheader-[size]
cc-center
Section Header - Right
sheader-[size]
cc-right
Hero
Large - Headline
Subhead description below
Hero - Image
hero
Hero - Icon
hero-icon
ListItem
default
Label
Label
Item
item
Card
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Bar - Cells
AdaptIcon
adapticon-cell-[size]
Avatar
avatar-cell-[size]
Button
btn-cell-[size]
Bars
AdaptIcon
adapticon-bar-[size]
Tab
Tab 1
Tab 2
Tab 3
Tab 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Tab 5
Tab 6
Tab A
Tab B
Tab C
Tab
tab
Accordion
Modal
Modal
modal
Open Sheet
Sheet
sheet
Accessible popup
Welcome to Finsweet's accessible modal component for Webflow Libraries. This modal uses Webflow Interactions to open and close. It is accessible through custom attributes and custom JavaScript added in the embed block of the component. If you're interested in how this is built, check out the Attributes documentation page for this modal component.
See docsSheet
sheet
Button Panel
Form
Form Elements (ε)
Thank you for your submission!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Prevent Style Clean Up
DS-NONE
DS-3XS
Card, Search Bar, Switch
DS-2XS
Card
DS-XS
Search Bar Refresh Icon
DS-S
App Bar
DS-M
FAB, Snackbar
DS-L
Sheet, App Bar (Max), Menu, Card (when picked up)
DS-XL
?
DS-2XL
FAB (Pressed)
DS-3XL
Nav Drawer, Modals
DS-Huge
Dialogs
Image - Icons
XXSmall
0.5 rem | 8 px
u-icn-xxs
XSmall
0.75 rem | 12 px
u-icn-xs
Small
1 rem | 16 px
u-icn-s
SMedium
1.25 rem | 20 px
u-icn-sm
Medium
1.5 rem | 24 px
u-icn-m
Large
2 rem | 32 px
u-icn-l
XLarge
2.5 rem | 40 px
u-icn-xl
2XLarge
3 rem | 48 px
u-icn-2xl
3XLarge
4 rem | 64 px
u-icn-3xl
4XLarge
5 rem | 80 px
u-icn-4xl
Huge
6.5 rem | 104 px
u-icn-huge