Abacus DesignKit
2.0

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.

Alerts

Alertdata-status
Alert
Here's some info about what just happened
Toastdata-status
Toast shouldn't be more than 2 lines long

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
Surfaceis--surface
Button
Borderedis--bordered
Button
Plainis--plain
Button

Button Attributes

data-status="neutral"
data-status="brand"
data-status="info"
data-status="success"
data-status="warning"
data-status="danger"
data-status="brand-apple"
data-status="brand-google"

Other Button Elements

button__group
This is a modal

Cards

Card
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 with Button
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.

Checkout Card
Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Profile Card
Headline
Subhead
Position
Company
City, State
Membership

CPE: 1

Certifications: 1

Licenses: 1

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, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Ticket Card
Subhead
Headline
Caption
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

Forms

Structure

form
form__wrap
form__field
form__messagedata-status

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
radio-table
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.

Headings

Header
Tagline

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HeaderAlign Center
Tagline

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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
By clicking Sign Up you're confirming that you agree with our Terms and Conditions.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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

Tooltips

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

Tags

Tag
Tag
is--icon-left
Tag
is--icon
is--icon-right
Tag
is--group
Tag
Group
Tag
is--group-left
Tag
Group Left
is--group-right
Group Right
Tag