Elements
Lists
Feature Point (in the text box try to only use text not titles, lists or images, you can bold or make italic) for each element set visibility of what you want/don't want copy used rich text to allow you to add bold/italics and links.
Properties
Below are the combo class values
Element
Font Size
Line Height
Border
Border Color
Padding
Background
Link Block
1em
1.2em
Bottom 1.5px
medium-light
1em
Transparent
Combo Classes
The following elements use this combo class structure.
Type
Class Combo
Link Block
Icon
Interaction
The following elements use this combo class structure.
Element
Interaction Name
Mouse In
Mouse Out
Notifications
Notifications which can be used pinned at the top of a page or to an element to highlight status or alerts. When using alerts try to make the alert conversational i.e "It looks like we're missing this, try to adding in this xxx"
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Class
Padding
Display
1em 1.2em
Flex
Status Markers & Tags
Simple dot to highlight UI status, Also a tag which you set two properties of, status or is tag which will turn into a tag or just text
8.0
Status
Is Tag
Is Tag
true
false
true
false
true
false
Dividers
Very simply a 1px line which can have a color class to extend its background color
or
Meta
12,065
Class
Min-Width
Max-Width
Max-Height
Max-Height
1px
1px
1px
1px
Accordion
A very simple accordion with animation for the open state.
01. Accordion Option
Element
Class
Border
Padding
Accordian
2px mid-light bottom
Dropdown Toggle
1em 2em 0 1em
Dropdown List
2px mid-light top
Element
Interaction Name
Open
Close
Loaders and Progress
Progress
Below is an example of a progress bar you can press the preview to see it in action, this uses javascript to action the loader, we have done this so that you can hook this up to any development you have.
Progress Label
10%
Helper text
There are an interaction for page load for showing the loader if required
Element
Starts Loading
Page Loaded
circle-loader
Avatars
3 size avatar which is wrapped in a link block for convenience. Set the status to active to show notification circle
Element
Extender
Width
Height
Radius
Default
50px
50px
50%
Small
40px
40px
50%
Small
30px
30px
50%
User
Nested avatar for profile component
Socials
A list of social icons for placement
Image
A container for image use in slots and components
Video
The simple video component that allows you to use your own hosted video TIP: if you use a background video and upload via Webflow you an then inspect that element to grab the hosted URL and use that in this video
00:00 / 00:00