UI Elements

Accordion

Accordion
Headline

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.

Buttons

Buttons share one base class, and you can combine style and size combo classes to create your different variations, as long as each of them exists as its own combo class.

Button
data-button-size="sm"
Button
data-button-size="lg"
Button
Button - Icon left
Button - Icon only
Button - Icon right
Button Surface
Button Bordered
Button Plain

Cards

Card w/ Icon
Headline

Subhead

Lorem ipsum dolor sit amet, consectetur adipiscing elit id venenatis pretium risus euismod dictum egestas orci netus feugiat ut egestas ut sagittis tincidunt phasellus elit etiam cursus orci in. Id sed montes.

Card w/ Background
Headline

Subhead

Lorem ipsum dolor sit amet, consectetur adipiscing elit id venenatis pretium risus euismod dictum egestas orci netus feugiat ut egestas ut sagittis tincidunt phasellus elit etiam cursus orci in. Id sed montes.

Display Card
Headline
Pricing Card

Title

$0/mo
$00/yr
Includes:
Pricing feature
Video Card
A gray image with a dark gray box that contains two tall mountain peaks and a sun in the background
Headline
Subhead

Carousels

Carousel - Full
Carousel - Half
Carousel - Third
Carousel - Fourth

Dividers

Horizontal Divider

Dropdowns

Dropdown

dropdown
Dropdown
dropdown
Contact Us

Forms

Structure

form
form__wrap
form__message

Lorem ipsum dolor sit amet.

Core Input

input__wrap
input__label
input__label-hint
input__field
input
is--surface
border--none
is--overlap
is--inset

Select Fields

It's annoying to manually change the select options. Use this tool to generate a select input. https://select-input-tool.webflow.io/

input__icon-wrap
is--right
input__shortcut
⌘K
input__add-on
https://
is--right
Add-on

Radios

Radio
radio-button
1: Poor
5: Excellent
radio-card
radio-image

Checkboxes

Checkbox
checkbox-button
Segment
Switch
Switch (small)
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Modal

Modal 1

Heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Modal 2

Heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Modal 3

Heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Loading Animations

Loading Animation 1
Loading Animation 2
Loading Animation 3
Loading Animation 4
Loading Animation 5

Miscellaneous

Breadcrumb
Subscribe Form
We've added you to our mailing list.
Oops! Something went wrong. Reload the page and try again.
By clicking Subscribe you're confirming that you agree with our Terms and Conditions.
Back-to-Top
Look to the bottom right, and you'll see a button that will take you to the top of the page.
List - Custom Bullets

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Social Icons
Sidebar Link
Sidebar Link
Sidebar Link
Sidebar Dropdown
Sidebar Link
Sidebar Link

Pagination

Pagination 1
Pagination 2
Pagination 3

Tabs

Tabs
Tab One
Tab Two
Tab Three

Tooltips

  • Tooltip - Top
    Tooltip Top
  • Tooltip - Left
    Tooltip Left
  • Tooltip - Right
    Tooltip Right
  • Tooltip - Bottom
    Tooltip Bottom

Tags

Tag
Tag