Default LeftSidePanel RightSidePanel ClosablePanel WithTrigger WithFullHeader WithFooter
<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>
Title
Release
RainbowBridge/08-18-2021AM/A2A
State
Indexed
Edit Example
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).
Left Side Panel
test-case
<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-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>
Release
RainbowBridge/08-18-2021AM/A2A
State
Indexed
Edit Example
Left-positioned collapsible panel for sidebar navigation and content details.
Right Side Panel
test-case
<section nve-layout="row align:space-between pad:sm">
<div nve-theme="root">
<nve-panel behavior-expand expanded side="right" 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>
</section>
Release
RainbowBridge/08-18-2021AM/A2A
State
Indexed
Edit Example
Right-positioned collapsible panel for supplementary content and property inspectors.
<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>
Release
RainbowBridge/08-18-2021AM/A2A
State
Indexed
Edit Example
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 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>
Release
RainbowBridge/08-18-2021AM/A2A
State
Indexed
Edit Example
Collapsible panel with built-in close button and external toggle for flexible expand/collapse behavior.
Panel with complete header including title, subtitle, and action icon slots for rich header content.
Panel with footer containing action buttons for form submissions and destructive actions.