Layouts · Content display
Dashboard
Also called: Overview page, Admin home, Analytics dashboard, Control panel
Sums up several different sets of key data on one screen with metric cards, charts and short lists, so people can see the overall picture and spot problems in seconds.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstBuild a dashboard home page. Row 1: 4 metric cards, each showing the metric name, a big number and the % change vs. yesterday. Row 2: a 30-day trend line chart taking 2/3 of the width on the left, and a pie chart of the channel breakdown taking 1/3 on the right. Row 3: a short "Latest orders" list that shows only 5 items and has a "View all" link. Use a 12-column grid, white cards and 16px gaps.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Dashboard is what you need.
Use Dashboard when
- You need to sum up several different kinds of data on one screen and get the overall picture fast
- The content is mostly key numbers, trends and breakdowns, and users mainly look rather than edit
- Each module has different content and only needs to show a summary
Pick something else when
The content is lots of records of the same kind that users need to view, filter or compare one by one
Use insteadData TableUsers need to enter or edit lots of fields
There are only one or two metrics, and a single number or sentence says it all
You need to show the full details of a single record
Use insteadDescription List
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Too many modules, so every chart is tiny and nothing stands out
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Metrics show only a number with no baseline (vs. last period, vs. last year, vs. target), so you can't tell if it's good or bad
- 03
A full data table with hundreds of rows dropped into the dashboard, instead of a summary plus "View all"
- 04
All cards are the same size, with no hierarchy between key metrics and minor ones
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A row of metric cards at the top, then chart cards and short list cards of different sizes arranged in a grid over several rows. Important modules take bigger cells.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A dashboard is the most common home page in admin systems. At the top is a row of metric cards showing key numbers and how they changed, like "Orders today 1,280" or "Revenue $56,000". Below are line, bar and pie charts showing trends and breakdowns. Further down there may be short lists like "Latest orders" or "To-dos".
Its goal is "understand at a glance": within a few seconds of opening the page, you know whether the business is doing fine and what needs attention. So each module shows only the most important info, and the details are a click away in the matching data table or detail page.
For the layout, a grid usually splits the page into cards of different sizes, and important charts get bigger cells. The difference from a Card Grid: every card on a dashboard has different content (they're heterogeneous), while every card in a card grid has the same structure and is one record of the same kind of data.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-dashboard- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026