Studiov1.2.3
Studio/Patterns/Panel

Panel

Layout

Card panel layout for dashboards and admin views. A contained surface with a header, optional divider, and scrollable content area. Suitable for data widgets, kanban columns, or settings sections.

All patterns
panel
Reusable pane preview
Use Cases
  • Dashboard KPI widgets
  • Kanban board columns
  • Settings panels with grouped options
  • Side panels in split-layout admin pages
Do
  • Use a clear panel title in the header
  • Add a border or shadow for visual containment
  • Keep padding consistent inside the panel
  • Support optional action buttons in the header row
Avoid
  • Nest panels more than 2 levels deep
  • Use panels as the primary hero on a public-facing page
  • Omit the panel header when nesting multiple panels
  • Mix scrollable and non-scrollable panels in the same row
Reference component: PanelVariants: 3Token bindings: 5