Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or Drawer is out of context of the rest of the page (notifications, navigations, settings).
<section nve-layout="row align:space-between pad:sm">
<div nve-theme="root">
<nve-panel behavior-expand expanded side="left" style="width: 280px; height: 550px">
<nve-panel-header>
<div slot="title">Title</div>
<div slot="subtitle"></div>
</nve-panel-header>
<nve-panel-content nve-layout="column gap:md">
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Release</label>
<p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Date</label>
<p nve-text="label semibold sm">2021-08-18</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">State</label>
<nve-badge status="finished">Indexed</nve-badge>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Driver</label>
<p nve-text="label semibold sm">Kenjiro Ono</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Copilot</label>
<p nve-text="label semibold sm">Kenichi Yoshii</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">GVS</label>
<a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Session ID</label>
<a href="#" nve-text="link body sm">Experiment 12345</a>
</div>
</nve-panel-content>
</nve-panel>
</div>
</section>
Panels provide a way to make extra content available alongside the primary page layout,
in a way that is accessible and minimizable.
Panels are always minimizable, either by closing or collapsing. The proper close/collapse icon button displays depending on the
whether you set the closable attribute. By default closable is false and the panel collapses down to just an expand icon.
Additionally, nve-panel can be have its side property set to left or right to get the proper collapse/expand icon and animation.
Installation
<script type="module">
import '@nvidia-elements/core/panel/define.js';
</script>
<section nve-layout="row align:space-between pad:sm">
<div nve-theme="root">
<nve-panel behavior-expand expanded side="left" style="width: 280px; height: 550px">
<nve-panel-header>
<div slot="title">Title</div>
<div slot="subtitle"></div>
</nve-panel-header>
<nve-panel-content nve-layout="column gap:md">
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Release</label>
<p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Date</label>
<p nve-text="label semibold sm">2021-08-18</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">State</label>
<nve-badge status="finished">Indexed</nve-badge>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Driver</label>
<p nve-text="label semibold sm">Kenjiro Ono</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Copilot</label>
<p nve-text="label semibold sm">Kenichi Yoshii</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">GVS</label>
<a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Session ID</label>
<a href="#" nve-text="link body sm">Experiment 12345</a>
</div>
</nve-panel-content>
</nve-panel>
</div>
</section>
An external trigger supports expanding/collapsing or hiding/showing a panel. In this example clicking the button toggles the expanded attribute on the nve-panel between true and false.
Collapsible Panel with External Trigger is for use with a fixed position when collapsed, otherwise the button may have a flat side and not be on the edge of the page.
Collapsible panel with built-in close button and external toggle for flexible expand/collapse behavior.
<section nve-layout="row align:space-between pad:sm full">
<div nve-theme="root">
<nve-panel behavior-expand expanded closable side="left" style="width: 280px; height: 550px">
<nve-panel-content nve-layout="column gap:md">
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Release</label>
<p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Date</label>
<p nve-text="label semibold sm">2021-08-18</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">State</label>
<nve-badge status="finished">Indexed</nve-badge>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Driver</label>
<p nve-text="label semibold sm">Kenjiro Ono</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Copilot</label>
<p nve-text="label semibold sm">Kenichi Yoshii</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">GVS</label>
<a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Session ID</label>
<a href="#" nve-text="link body sm">Experiment 12345</a>
</div>
</nve-panel-content>
</nve-panel>
</div>
<nve-button interaction="emphasis">Toggle Panel</nve-button>
</section>
<script type="module">
const button = document.querySelector("nve-button");
button.addEventListener("click", () => {
const panel = document.querySelector("nve-panel");
panel.expanded = !panel.expanded;
});
</script>
Closable Panel with External Trigger
Indicates whether the user can dismiss or close the element.
ClosableDescriptiontrueThe element displays a close control and the user can dismiss it.falseThe user cannot close the element and must dismiss it programmatically.
Closable panel with external toggle button for programmatic show/hide control.
<section nve-layout="row align:space-between pad:sm full">
<div nve-theme="root">
<nve-panel behavior-expand id="trigger-closable-false" expanded side="left" style="width: 280px; height: 550px">
<nve-panel-content nve-layout="column gap:md">
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Release</label>
<p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Date</label>
<p nve-text="label semibold sm">2021-08-18</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">State</label>
<nve-badge status="finished">Indexed</nve-badge>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Driver</label>
<p nve-text="label semibold sm">Kenjiro Ono</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Copilot</label>
<p nve-text="label semibold sm">Kenichi Yoshii</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">GVS</label>
<a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Session ID</label>
<a href="#" nve-text="link body sm">Experiment 12345</a>
</div>
</nve-panel-content>
</nve-panel>
</div>
<nve-button interaction="emphasis">Toggle Panel</nve-button>
</section>
<script type="module">
const button = document.querySelector("nve-button");
button.addEventListener("click", () => {
const panel = document.querySelector("nve-panel");
panel.expanded = !panel.expanded;
});
</script>
Panel with Header
The nve-panel-header sub-component can be slotted into nve-panel to get default border styling, and extra sub slots within the header.
In this example nve-panel-header is further slotted with elements for slot="title", slot="subtitle", icon-button with slot="action-icon"
Panel with complete header including title, subtitle, and action icon slots for rich header content.
<section nve-layout="row align:space-between pad:sm">
<div nve-theme="root">
<nve-panel behavior-expand expanded side="left" style="width: 280px; height: 550px">
<nve-panel-header>
<div slot="title">Title</div>
<div slot="subtitle">Subtitle</div>
<nve-icon-button container="flat" slot="action-icon" icon-name="more-actions"></nve-icon-button>
</nve-panel-header>
<nve-panel-content nve-layout="column gap:md">
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Release</label>
<p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Date</label>
<p nve-text="label semibold sm">2021-08-18</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">State</label>
<nve-badge status="finished">Indexed</nve-badge>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Driver</label>
<p nve-text="label semibold sm">Kenjiro Ono</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Copilot</label>
<p nve-text="label semibold sm">Kenichi Yoshii</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">GVS</label>
<a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Session ID</label>
<a href="#" nve-text="link body sm">Experiment 12345</a>
</div>
</nve-panel-content>
</nve-panel>
</div>
</section>
Panel with footer containing action buttons for form submissions and destructive actions.
<section nve-layout="row align:space-between pad:sm">
<div nve-theme="root">
<nve-panel behavior-expand expanded side="left" style="width: 280px; height: 600px">
<nve-panel-content nve-layout="column gap:md">
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Release</label>
<p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Date</label>
<p nve-text="label semibold sm">2021-08-18</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">State</label>
<nve-badge status="finished">Indexed</nve-badge>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Driver</label>
<p nve-text="label semibold sm">Kenjiro Ono</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Copilot</label>
<p nve-text="label semibold sm">Kenichi Yoshii</p>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">GVS</label>
<a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
</div>
<div nve-layout="column gap:xs">
<label nve-text="body sm medium muted">Session ID</label>
<a href="#" nve-text="link body sm">Experiment 12345</a>
</div>
</nve-panel-content>
<nve-panel-footer>
<nve-button interaction="destructive" container="flat">Destructive</nve-button>
<nve-button>Default</nve-button>
</nve-panel-footer>
</nve-panel>
</div>
</section>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs PreviewAPI DocumentationFully Themeable
beta
Robust unit test coveragesPassed API ReviewPassed Designer VQA ReviewIncluded in library package
stable
No known outstanding AA WCAG issuesNo known outstanding performance issuesAdapts to different screen/container sizesNo breaking API changes for at least 90 days