Provide a consistent page structure across the applications, ensuring a seamless user experience.

Page layout slot reference showing all available panel positions including header, subheader, left, right, bottom, and aside regions. Use as a starting point for understanding how to compose complex application layouts.

All slot areas and debug backgrounds for nve-page.

Warning banner in the header slot above the page header.

Toolbar in the subheader slot below the header for secondary navigation or actions.

Large subheader panel with back navigation, title, metadata, and action buttons. Use for detail pages that need prominent context like entity names, status badges, and key-value metadata above the main content.

Left slot with a page panel for side navigation or content.

Right slot with a page panel for side content.

Bottom slot with a page panel for footer or supplemental content.

Left-aside slot with a vertical toolbar for navigation.

Right-aside slot with a vertical toolbar for actions or navigation.

Subfooter slot with a toolbar for status or metadata.

Footer slot with a toolbar for links or actions.

Use Page Panel with Invoker Command API to dynamically open and close page panels.

Expandable page panels that collapse to a slim strip and toggle open with chevron buttons. Use when panels contain supplementary content that users access intermittently, preserving main content space while keeping panels accessible.

Closable page panels that fully remove from the layout when dismissed. Use when panels open on demand for temporary tasks like viewing item details or applying filters, and the user needs full main content space when done.

Use Drawer to create navigation that is outside the context of the current view.

Use Page Panel with Toolbar to create complex navigation groups that are within the context of the current view.

Page panel with tabbed header for switching between categorized content views within a sidebar. Use when a panel contains related sections like outline, search, and settings that share the same screen region.

Page panel with title and subtitle headings in the header for labeling panel content. Use to provide clear context about what the panel contains, such as a details pane or properties inspector.

Stress test of all available slot layouts for nve-page.

Card grid page layout for browseable collections like infrastructure dashboards, asset catalogs, or media galleries. Use with view-mode toggles for switching between grid and table presentations.

Multi-video grid layout with synchronized playback controls for monitoring and review workflows. Ideal for surveillance dashboards, AV sensor feeds, or simulation playback where concurrent streams need simultaneous viewing.

IDE-style editor layout with file outline, main editor, and console panels. Use for code playgrounds, configuration editors, or development tools that need a split-pane workspace with toolbar controls.

Resizable left panel with drag handle for adjustable sidebar width. Use when users need to control the balance between navigation or outline panels and main content area.

Multi-panel resizable layout with independent drag handles on left, right, and bottom panels. Use for complex workspaces like IDEs or dashboards where users need to customize the size of each content region independently.

Resize handle with snap-to-boundary behavior on double-click for quickly toggling a panel between collapsed and expanded states. Use for detail panels that users frequently show and hide.