.fizz-panel is a section of content that can be triggered to slide in and out of a parent container. The parent container should have the class .fizz-has-panel and .fizz-panel-is-open, which can be toggled with a click handler to show/hide the panel. The panel will be as tall as the parent container. The panel itself should include a button to toggle the state of the panel.

The default width of the panel is 350px, but can be overridden with a custom property on the .fizz-panel element.

Custom Property Default Value Description
--panel-width 350px The width of the panel

Here's the Panel!

<button class="fizz-button-secondary" onclick="togglePanel()">Toggle Panel</button>

<div class="fizz-has-panel fizz-panel-is-open" style="height: 300px; border: 1px solid #EAEAEA;">
<div class="fizz-panel" style="--panel-width: 250px;">
<div class="fizz-flex-row fizz-inset-square-16 fizz-surface-gray fizz-border-bottom">
<h3 class="fizz-heading-4 fizz-flex-item">Here's the Panel!</h3>
<button class="fizz-icon-button-small" onclick="togglePanel()">
<svg xmlns="" viewBox="0 0 24 24" class="fizz-icon-24"><path d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4z"/></svg>

function togglePanel() {
let panelContainer = document.querySelector(".fizz-has-panel");