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

This is a left panel.

×

This is a right panel.

×

This is a top panel.

×

This is a bottom panel.

×

Basic Panel

×

Fixed 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.



Basic HTML

You can create Panels with this basic HTML:

Top Panel Right Panel Bottom Panel Left Panel
Basic Panel

Advanced HTML

You can create a fixed position panel with this HTML:

Fixed Panel ×

Fixed Panel

Fixed Panel

You can create transform a panel into a grid block with this HTML:

Grid Block Panel ×

Grid Block Panel

Grid Block Panel ×

Grid Block Panel


Sass Mixins

Use these mixins to write a panel with a custom class.

.custom-panel { // Extend the panel selector to get basic structural styles @extend %panel-base; // Use the layout mixin to set the position and sizing @include panel-layout( $position: left, // Can be top, right, bottom, or left $size: default, // Can be any unit, or "default" to use the settings variables $shadow: 0 4px 10px black // The shadow will be auto-adjusted based on the position of the panel ); // Use the style mixin to define visual styles @include panel-style( $padding: 1rem, $background: #fff ); &.fixed { // Add position: fixed to anchor the panel to the window instead of the panel's parent position: fixed; } }

Sass Variables

You can customize Panels with these variables in the _settings.scss file:

$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;