page_header/title_only dense
Page title alone.
Section gallery
Layout shellsPage header
Title and short description at the top of a page.
page_header/title_description spacious
Page title with a muted line of description under it.
Filter bar
Dropdown filters that every section on the page listens to.
filter_bar/inline dense
Filters in one row with no frame.
filter_bar/card spacious
Filters in a framed card.
KPI row
Headline numbers side by side.
kpi_row/plain dense
One to four numbers in a row, no frames.
kpi_row/cards spacious, executive
One to four numbers, each in its own card.
kpi_row/with_compare executive
One number with the change from a second number, for example actual against target.
Trend
How numbers change over time.
trend/line dense, operational
Lines over time for one to three numbers.
trend/area_stacked executive
Stacked areas over time, for parts of a total.
trend/bar operational
Bars over time for one number.
trend/kpi_and_line executive, spacious
The total as a big number next to its line over time.
trend/line_by_series dense, operational
One line per value of a field over time, for example mastery per school.
trend/share_by_series executive
Shares of 100% over time, one band per value of a field.
Breakdown
A number split by one category.
breakdown/bar dense, operational
Bars per category for one or two numbers.
breakdown/horizontal_bar operational
Sideways bars, good for long category names.
breakdown/donut executive, spacious
Ring of shares of a total, for a few categories.
breakdown/stacked_bar executive
Stacked bars per category for two or three parts of a total.
breakdown/share_bar executive
Bars of 100% per category, split into two or three parts, for example performance bands.
breakdown/share_by_series executive
Bars of 100% per category, one part per value of a field, for example the band of each student.
Leaderboard
The top categories ranked by a number.
leaderboard/top_table dense, operational
Ranked table of the top categories with up to three numbers.
leaderboard/top_bar executive
Sideways bars of the top categories by one number.
Comparison
Several numbers compared across one category.
comparison/grouped_bar dense, operational
Bars side by side per category, one per number.
comparison/small_multiples spacious
One small bar chart per number, side by side.
comparison/grouped_by_series dense, operational
Bars side by side per category, one per value of a field, for example FY2024 and FY2025 per line.
Matrix
Rows by numbers or by the values of a field, with subtotals and colour rules.
matrix/heatmap dense, analytic
Rows by the values of a field, cells shaded by the number, for example mastery by standard and school.
matrix/pivot_table dense, report
Rows grouped by one or two fields with subtotals and a grand total, one column per number, for example a statement with two years and the variance.
Detail table
Row-by-row records with chosen columns.
detail_table/plain dense
All rows in one table.
detail_table/paged operational
Rows in pages, sorted and paged on the server.