The dashboard mockup
What the deployments dashboard under the headline 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 deployments dashboard, built in code rather than shown as a picture and tilted in 3D, so it stays sharp at every size. Its parts slide in when the page opens. 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 | The logo and nine pages in three groups (Main, Management, Resources), some with a count | Pick a page; the header's title follows |
| Header | The page title, a search box and the user's menu | Type in the search box, open the user's menu |
| Figure cards | Five cards: total, successful and failed deployments, average deploy time and uptime, each with a trend | Drag the cards sideways to reorder them |
| Recent deployments | A table of six deployments with their status, last deploy, environment and version | Open a row's menu of actions |
Its labels are translated with the rest of the site, and in Arabic the whole mockup mirrors, tilt included. On phones it is shown at half size, and its edges fade into the page.
The search box, the New Deployment button and the menu items are there to look real and do nothing. The figures, names, dates and the user 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 mockup's figures, table rows, sidebar pages and user.
How it is built
Included with your purchase. Sign in to read, or open it in your download.
How the mockup is laid out, tilted, mirrored and animated.
Remove or replace it
Included with your purchase. Sign in to read, or open it in your download.
How to take the mockup off the home page or put a screenshot in its place.