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.

Buttonbutton
data-button-size="sm"
Button
data-button-size="lg"
Button
Button - Icon leftis--icon-left
Button - Icon onlyis--icon
Button - Icon rightis--icon-right
Surface
Bordered
Plain

Other Button Elements

button__group
This is a modal

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.

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__field
form__message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Core Input

input__wrap
input__label
input__label-hint
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-color
toggle-button
radio-card
radio-image

Checkboxes

Checkbox
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
Loading Animation 6
Loading Animation 7
Loading Animation 8
Loading Animation 9
Loading Animation 10

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 left, by the sidebar, 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

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