- Colors
- Typography
- Icons
- Buttons
- Form
- Table
- Tabs
- Tooltip
- Accordions
- Toast
- Notify
- Breadcrumbs
- Common
- Modal
- Pagination
Colors
Hierarchy
Display – Roboto : 900 : Font-Size 38px : Line-Height 46px
Display : Mobile + Tablet – Roboto : 900 : Font-Size 24px : Line-Height 28px
H1 – [Font] : [700] : Font-Size [28px] : Line-Height [36px]
H2 – [Font] : [700] : Font-Size [24px] : Line-Height [32px]
H3 – [Font] : [700] : Font-Size [20px] : Line-Height [28px]
H4 – [Font] : [700] : Font-Size [18px] : Line-Height [21px]
H5 – [Font] : [700] : Font-Size [16px] : Line-Height [19px]
H6 – [Font] : [700] : Font-Size [14px] : Line-Height [16px]
Body Copy : Regular
Roboto : 400 : Font-Size 15px : Line-Height: 23px
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
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
Spire lab Icons
Mobius Icons
Primary Button
Secondary Button
Add To Cart Button
UI: Icon Links
Upload File Button
Input : Form : Title + Input / Error
Input : Form : No Title
Input : Search
TextArea
Input : Drop Down
Input : Drop Down : No Title
Input : Dynamic Dropdown
Input : Dynamic Dropdown
DatePicker
Checkbox
Checkbox
Radio
Form Validation
Table
| Ship To | Order Total | reorder | ||||
|---|---|---|---|---|---|---|
| 1/5/2018 | 1234504 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Submitted | 10000 | $ 805.92 | |
| 1/4/2018 | 1234503 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Shipped | 10000 | $ 44.01 | |
| 1/3/2018 | 1234502 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | RMA | 10000 | $ 123.45 | |
| 1/2/2018 | 1234501 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Complete | 10000 | $ 44.01 | |
| 1/1/2018 | 1234500 | MFG Co., 123 North Fifth, Minneapolis, MN 55406 | Complete | 10000 | $ 123.45 |
Tabs
- Selected
- Tab 2
- Tab3
Tooltip
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
Short Breadcrumbs
Long Breadcrumbs
Spinner
Tags
Overflow menu
Modal
Pagination
| Invoice Number | Invoice Date | Terms | Due Date | Ship To / Pick Up | Status | Invoice Total | Current Balance |
|---|---|---|---|---|---|---|---|
| 0002080 | 8/14/2019 | Net 60 | Paid | Plymouth Warehouse | open | $160.00 | $0.00 |
| 0101059 | 7/20/2020 | Net 30 | Paid | Edina Warehouse 1 | open | $59.00 | $0.00 |
| 0202055 | 8/14/2019 | Net 60 | Paid | Plymouth Warehouse | open | $110.00 | $0.00 |
| 0302015 | 8/14/2019 | Net 30 | 8/20/2020 | Edina Warehouse 1 | overdue | $30.00 | $15.00 |
| 0401056 | 7/20/2020 | Net 30 | Paid | Edina Warehouse 1 | open | $56.00 | $0.00 |
| 0502073 | 8/14/2019 | Net 60 | Paid | Plymouth Warehouse | open | $146.00 | $0.00 |
| 0602041 | 8/14/2019 | Net 30 | Paid | Plymouth Warehouse | open | $82.00 | $0.00 |
| 0702080 | 8/14/2019 | Net 60 | Paid | Plymouth Warehouse | open | $160.00 | $0.00 |
| 0801039 | 7/20/2020 | Net 30 | 8/20/2020 | Edina Warehouse 1 | overdue | $39.00 | $39.00 |
| 0901095 | 7/20/2020 | Net 30 | Paid | Plymouth Warehouse | open | $95.00 | $0.00 |