NV NVIDIA Elements Catalog Starters Repo System Themes Getting Started Getting Started Installation CLI MCP Skills Lint Integrations Getting Started Angular Bundles CDN Custom Elements Eleventy Golang HTMX + Go Hugo Import Maps Lit Lit Library MCP Apps NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue About What’s New Changelog Metrics Support Accessibility Contributions Requests Migration Foundations Overview Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions DESIGN.md Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Codeblock Color Combobox Copy Button Datagrid Getting Started Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Format Bytes Datetime Number Relative Time Truncate Forms Getting Started Validation Actions Control Gauge Icon Icon Button Input Input Group Logo Markdown Markdown CSS Media Controller Pause Button Playback Rate Select Mute Button Seek Button Time Range Volume Range Full-screen Button Menu Month Monaco Input Diff Input Monaco Editor Diff Editor Problems Notification Page Page Header Page Loader Pagination Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Chat Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Navigation Onboarding Panel Responsive Search Subheader Trend Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Agent Tooling Agent Ownership Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Page

stable:  2.7.3 Coverage: 100.00% Bundle: 18.21kb Lighthouse: 100 Axe Core Released: 1.15.0
Overview API Examples
DefaultSlotsContentSlotBannerSlotSubheaderSlotSubheaderLargeSlotLeftSlotRightSlotBottomSlotLeftAsideSlotRightAsideSlotSubfooterSlotFooterInvokerCommandPanelExpandablePanelClosableInteractionDrawerInteractionPanelNavigationPanelTabsPanelHeadingsDocumentScrollKitchenSinkLayoutCardGridLayoutMultiVideoLayoutEditorResizeResizeMultiResizeSnap

Default

NV

Infrastructure

Link 1 Link 2 EL panel

main

page content
Edit Example

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

Slots

subheader left-aside left

main content

bottom right right-aside subfooter footer
Edit Example

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.

Content

test-case

header

 subheader left-aside left

main content

bottom right right-aside subfooter footer
Edit Example

All slot areas and debug backgrounds for nve-page.

Slot Banner

test-case
Warning banner message view details NV

Infrastructure

Link 1 Link 2 EL

main

page content
Edit Example

Warning banner in the header slot above the page header.

Slot Subheader

test-case
NV

Infrastructure

Link 1 Link 2 EL

Subheader

main

page content
Edit Example

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

Slot Subheader Large

NV

Infrastructure

Link 1 Link 2 EL

Subheader Large

Default
Driver Jane Doe
Route Santa Clara
Status complete

main

page content
Edit Example

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.

Slot Left

test-case
NV

Infrastructure

Link 1 Link 2 EL left

main

page content
Edit Example

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

Slot Right

test-case
NV

Infrastructure

Link 1 Link 2 EL

main

page content

right
Edit Example

Right slot with a page panel for side content.

Slot Bottom

test-case
NV

Infrastructure

Link 1 Link 2 EL

main

page content

bottom
Edit Example

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

Slot Left Aside

test-case
NV

Infrastructure

Link 1 Link 2 EL

main

page content
Edit Example

Left-aside slot with a vertical toolbar for navigation.

Slot Right Aside

test-case
NV

Infrastructure

Link 1 Link 2 EL

main

page content
Edit Example

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

Slot Subfooter

test-case
NV

Infrastructure

Link 1 Link 2 EL

main

page content

last updated 12 mins ago
Edit Example

Subfooter slot with a toolbar for status or metadata.

Slot Footer

test-case
NV

Infrastructure

Link 1 Link 2 EL

main

page content

docmentation logging contact
Edit Example

Footer slot with a toolbar for links or actions.

Invoker Command

NV

Infrastructure

main

page content
Edit Example

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

Panel Expandable

NV

Infrastructure

Link 1 Link 2 EL left

main

Toggle Left Panel Toggle Right Panel Toggle Bottom Panel
right bottom
Edit Example

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.

Panel Closable

NV

Infrastructure

Link 1 Link 2 EL left

main

Toggle Left Panel Toggle Right Panel Toggle Bottom Panel
right bottom
Edit Example

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.

Interaction Drawer

NV

Infrastructure

Link 1 Link 2 EL

main

page content

Drawer Header

drawer content

drawer footer
Edit Example

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

Interaction Panel Navigation

\n"}
NV

Infrastructure

Link 1 Link 2 EL

main

page content
Edit Example

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

Panel Tabs

NV

Infrastructure

Link 1 Link 2 EL Tab 1 Tab 2 Tab 3 Panel Content
Edit Example

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.

Panel Headings

NV

Infrastructure

Link 1 Link 2 EL

Header

Sub Header

 Panel Content
Edit Example

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.

Document Scroll

NV

Infrastructure

Link 1 Link 2 EL

main

page content

docmentation logging contact
Edit Example

Enables the page to use the document content scroll rather than its internal fixed scroll.

DocumentScroll Description true false

Kitchen Sink

test-case
NV

Infrastructure

Link 1 Link 2 EL

Session 254a2039f294

Default
Session ID 254a2039f294
Build 254a2v1801
Location Santa Clara
Status complete
Browse Debug Events Alert Badge Dialog Sensors front_tele_30fov front_wide_120fov left_fisheye_200fov right_fisheye_200fov rear_left_70fov rear_right_70fov Segments JavaScript HTML CSS

main

page content

bottom right last updated 12 mins ago docmentation logging contact
Edit Example

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

Layout Card Grid

patterntest-case
NV

Infrastructure

Link 1 Link 2 EL
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
example visualization for media card demo

•︎•︎•︎ •︎•︎•︎ •︎•︎•︎
•︎•︎•︎•︎•︎•︎ •︎•︎•︎•︎•︎•︎
Edit Example

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.

Layout Multi Video

patterntest-case
\n"}
NV

Infrastructure

Link 1 Link 2 EL

Subheader Large

Default
Driver Jane Doe
Route Santa Clara
Status complete
content...
Edit Example

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.

Layout Editor

pattern
NV

Playground

Browse Editor Elements EL

Project

Save Project Outline html head link link link body nve-badge

main

page content

console output last updated 12 mins ago
Edit Example

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.

Resize

\n"}
NV

Infrastructure

Link 1 Link 2 EL left
Edit Example

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.

Resize Multi

\n"}
NV

Infrastructure

Link 1 Link 2 EL left bottom right
Edit Example

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 Snap

\n"}
NV

Infrastructure

Link 1 Link 2 EL

Double click the resize handle to snap to the min or max.

left
Edit Example

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.