--- name: panel url: /panel --- ## Panels

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.

***
×

Left Panel

×

Right Panel

×

Top Panel

×

Bottom Panel

*** ### Basic HTML You can create Panels with this basic HTML
```html Top Panel Right Panel Bottom Panel Left Panel ×

Left Panel

×

Right Panel

×

Top Panel

×

Bottom Panel

```
Top Panel Right Panel Bottom Panel Left Panel
×

Left Panel

×

Right Panel

×

Top Panel

×

Bottom Panel

*** ### Alternate HTML Configuration You can create a fixed position Panel with this HTML
```html
Fixed Panel ×

Fixed Panel

```
Fixed Panel ×

Fixed Panel

*** ### Advanced HTML You can create transform a panel into a grid block with this HTML
```html Grid Block Panel ×

Grid Block Panel

```
Grid Block Panel ×

Grid Block Panel

You can anchor a panel to a grid block or window with this HTML:
```html Grid Block Panel ×

Left Window Panel

```
Left Window Panel ×

Left Window Panel

*** ### Sass Variables You can customize panels with these variables in the `_settings.scss` file: ```html $panel-size-horizontal: 300px; $panel-size-vertical: 300px; $panel-padding: $global-padding; $panel-background: #fff; $panel-shadow: 3px 0 10px rgba(black, 0.25); $panel-animation-speed: 0.25s; ```