Components / Layout
Layout
Containers, grids, stacks, and full application shells.
Primitives
The building blocks of any layout.
max-width container (center aligned)
Container
1
2
3
4
5
6
7
8
Grid
A
B
C
Flex
Stacked
items
vertically
Stack
Column patterns
Two and three column arrangements.
Main content
Sidebar
Two column
Nav
Content
Aside
Three column
Left
Right
Split layout
Even 50/50 split.
App shells
Common dashboard structures.
Detail pane for “Arabica Gayo”
Audit trail
Master detail
Sidebar
Overview
Customers
Orders
Topbar
Content
Sidebar layout
Header
Sidebar
Content
Header layout
KPI 1
KPI 2
KPI 3
KPI 4
Main chart
Side chart
Table
Dashboard layout
Toolbar helpers
Common layout utility rows.
Page title
Header + actions
Filter row
