---
name: panel
url: /panel
title: Panel
---

<h2>Panels</h2>

<h3 class="subheader">Panels are frames that slide in from the top, left, bottom, or right of the screen and appear over the interface. Grid blocks can also transform into panels, allowing you to hide content off-canvas on smaller screens.</h3>

<hr>

<button class="button" zf-hard-toggle="example-panel-top">Top Panel</button>
<button class="button" zf-hard-toggle="example-panel-right">Right Panel</button>
<button class="button" zf-hard-toggle="