Dashboard
Total clients
6389
Account balance
$ 46,760.89
New sales
376
Pending contacts
35
Buttons
Sizes
Apply
w-full
to any button to create a block level button.
Icons
Charts
Charts are provided by Chart.js . Note that the default legends are disabled and you should provide a description for your charts in HTML. See source code for examples.
Doughnut/Pie
Lines
Bars
Table with avatars
| Client | Amount | Status | Date |
|---|---|---|---|
|
Hans Burger 10x Developer |
$ 863.45 | Approved | 6/10/2020 |
|
Jolina Angelie Unemployed |
$ 369.95 | Pending | 6/10/2020 |
|
Sarah Curry Designer |
$ 86.00 | Denied | 6/10/2020 |
|
Rulia Joberts Actress |
$ 1276.45 | Approved | 6/10/2020 |
|
Wenzel Dashington Actor |
$ 863.45 | Expired | 6/10/2020 |
Table with actions
| Client | Amount | Status | Date | Actions |
|---|---|---|---|---|
|
Maria Ramovic Runner |
$ 863.45 | Approved | 6/10/2020 |
|
|
Hitney Wouston Singer |
$ 863.45 | Approved | 6/10/2020 |
|
|
Hans Burger 10x Developer |
$ 863.45 | Approved | 6/10/2020 |
|
Modals
This is possibly
the most accessible a modal can get
, using JavaScript. When opened, it uses
assets/js/focus-trap.js
to create a
focus trap
, which means that if you use your keyboard to navigate around,
focus won't leak to the elements behind, staying inside the
modal in a loop, until you take any action.
Also, on small screens it is placed at the bottom of the screen, to account for larger devices and make it easier to click the larger buttons.
Cards
Big section cards
Large, full width sections goes here
Responsive cards
Total clients
6389
Account balance
$ 46,760.89
New sales
376
Pending contacts
35
Cards with title
Revenue
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, cum commodi a omnis numquam quod? Totam exercitationem quos hic ipsam at qui cum numquam, sed amet ratione! Ratione, nihil dolorum.
Colored card
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, cum commodi a omnis numquam quod? Totam exercitationem quos hic ipsam at qui cum numquam, sed amet ratione! Ratione, nihil dolorum.