--- 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:

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:

Fixed Panel ×

Fixed Panel

Fixed Panel ×

Fixed Panel


Advanced HTML

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

You can anchor a panel to a grid block or window with this HTML:

Grid Block Panel ×

Left Window Panel

Left Window Panel ×

Left Window 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;