This page contains some of the elements and components (widgets) to test the generated color-sets.
Branding Title Confirmation panel
Are you sure you want to delete the item?
Yes, deleteNo, cancel
Cards
Heading h4
Paragraph Text Content
Heading h4
Paragraph Text Content
Heading h4
Paragraph Text Content
Heading h4
Paragraph Text Content
Heading h4
Paragraph Text Content
Tables
| TH | TH | TH |
|---|---|---|
| TD | TD | TD |
| TD | TD | TD |
| TD | TD | TD |
| TD in footer | TD in footer | TD in footer |
| TH | TH | TH | TH |
|---|---|---|---|
| TH in tbody | TD | TD | TD |
| TH in tbody | TD | TD | TD |
| TH in tbody | TD | TD | TD |
| TD in footer | TD in footer | TD in footer | TD in footer |
Calendar
Ordered and Unordered Lists
- List item
- List item
- List item
- List Item
- List Item
- List item
Paragraphs
Paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content paragraph Text Content.
Statuses and alerts (static colors)
a positive informative message (alert).
a negative and dangerous informative message (alert).
a success status
a warning status
an error status
Buttons
Any Element/Block with className "btn", also the <button> element, considered a Button, hence the following styling applied to:
buttonattractive buttonactive buttonButton with color classButton with hover colorButton with borderInverted button