Design System
Colors
Icons
Typography
Buttons
Form
Table
Tabs
Tooltip
Accordions
Toast
Notify
Breadcrumbs
Common
Modal
Pagination
Colors
Click on the color item to copy color path
Flip Icons
Mobius Icons
Hierarchy
H1 [Font] : [700] : Font-Size [32px] : Line-Height [40px]
H2 [Font] : [700] : Font-Size [28px] : Line-Height [34px]
H3 [Font] : [700] : Font-Size [24px] : Line-Height [30px]
H4 [Font] : [700] : Font-Size [20px] : Line-Height [26px]
H5 [Font] : [700] : Font-Size [18px] : Line-Height [22px]
H6 [Font] : [700] : Font-Size [16px] : Line-Height [22px]
p [Font] : [400] : Font-Size [16px] : Line-Height [26px]
Links
Bulleted Lists
- Unordered List Item
- Unordered List Item w/ Sub-List
- Unordered Sub-List Item
- Unordered Sub-List Item
- Unordered List Item
- Unordered List Item
Numbered List
- Numbered List Item
- Numbered List Item w/ Sub-List
- Numbered Sub-List Item
- Numbered Sub-List Item
- Numbered List Item
- Numbered List Item
Primary Button
Secondary Button
Add To Cart Button
UI: Icon Links
Upload File Button
Upload a File
TextField
Error
TextArea
Select
DatePicker
//
//
please choose a valid date
0//
Checkbox
Radio
Dynamic Dropdown
show options
Table
| Ship To | Order Total | reorder | ||||
|---|---|---|---|---|---|---|
| 1/5/2018 | 1234504 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Submitted | 10000 | $805.92 | Reorder |
| 1/4/2018 | 1234503 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Shipped | 10000 | $44.01 | Reorder |
| 1/3/2018 | 1234502 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | RMA | 10000 | $123.45 | Reorder |
| 1/2/2018 | 1234501 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Complete | 10000 | $44.01 | Reorder |
| 1/1/2018 | 1234500 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Complete | 10000 | $123.45 | Reorder |
Tabs
Selected
Tab 2
Tab3
Selected
Tab 2
Tab3
Tooltip
Tooltip with long text and default icon
Tooltip with custom icon
Tooltip with trigger component -
Accordions
- To obtain a price quote, add this item to your cart and select 'Request a Quote' from the cart page. You can request a quote for multiple items.
- To obtain a price quote, add this item to your cart and select 'Request a Quote' from the cart page. You can request a quote for multiple items.
- To obtain a price quote, add this item to your cart and select 'Request a Quote' from the cart page. You can request a quote for multiple items.
Toast
Notify
Warning Notification: Additional Copy Goes Here
Info Notification: Additional Copy Goes Here
Danger Notification: Additional Copy Goes Here
Success Notification: Additional Copy Goes Here
Short Breadcrumbs
Long Breadcrumbs
Spinner
Tags
Test Tag
Test Tag - deletable
To obtain a price quote, add this item to your cart and select 'Request a Quote' from the cart page. You can request a quote for multiple items.
Overflow menu
Modal
Pagination
| Invoice Number | Invoice Date | Terms | Due Date | Ship To / Pick Up | Status | Invoice Total | Current Balance |
|---|---|---|---|---|---|---|---|
| 000206 | 8/14/2019 | Net 30 | 8/20/2020 | Edina Warehouse 1 | overdue | $12.00 | $6.00 |
| 0101067 | 7/20/2020 | Net 30 | Paid | Plymouth Warehouse | open | $67.00 | $0.00 |
| 0202010 | 8/14/2019 | Net 30 | 8/20/2020 | Edina Warehouse 1 | overdue | $20.00 | $10.00 |
| 0302098 | 8/14/2019 | Net 60 | Paid | Plymouth Warehouse | open | $196.00 | $0.00 |
| 0402031 | 8/14/2019 | Net 30 | Paid | Plymouth Warehouse | open | $62.00 | $0.00 |
| 0502030 | 8/14/2019 | Net 30 | Paid | Plymouth Warehouse | open | $60.00 | $0.00 |
| 0601062 | 7/20/2020 | Net 30 | Paid | Plymouth Warehouse | open | $62.00 | $0.00 |
| 0702010 | 8/14/2019 | Net 30 | 8/20/2020 | Edina Warehouse 1 | overdue | $20.00 | $10.00 |
| 0801083 | 7/20/2020 | Net 30 | Paid | Plymouth Warehouse | open | $83.00 | $0.00 |
| 0901080 | 7/20/2020 | Net 30 | Paid | Plymouth Warehouse | open | $80.00 | $0.00 |