The dashboard preview
What the product dashboard in the hero shows, what a visitor can do with it, and how to change its sample data.
What it is
Under the hero's headline sits a full product dashboard, built in code rather than shown as a picture, so it stays sharp at every size and moves like a real app. It shows what your product could look like; it is not connected to any data.
| Part | What it shows | What a visitor can do |
|---|---|---|
| Sidebar | Navigation in three groups, with badges | Pick a page; the header's title follows |
| Key figures | Five cards: total users, new sign-ups, engagement, retention and session time | Drag the cards to reorder them |
| New users chart | An area chart over the morning | Hover for values, download it as a PNG |
| Traffic sources | A donut chart of four sources | Hover a source to see its share, download it as a PNG |
| Tasks | A short to-do list with priorities and due days | Tick tasks off |
| Customer details | A table of orders with their status | Download it as a PNG |
Its labels are translated with the rest of the site. Its layout stays left to right in Arabic, as a real product screenshot would. On phones and small screens the whole dashboard is scaled down to fit.
The numbers, names and dates in it are sample data for you to replace with your own product's.
Change the sample data
Included with your purchase. Sign in to read, or open it in your download.
The files that hold the preview's figures, chart points, table rows and tasks.
How it is built
Included with your purchase. Sign in to read, or open it in your download.
How the preview is laid out, scaled, loaded and kept light on slower devices.
Remove or replace it
Included with your purchase. Sign in to read, or open it in your download.
How to take the preview out of the hero or put a screenshot in its place.