Component Blueprints

Panels

information

You are currently viewing a sandbox preview version of Spring ’21 | Go back to Spring ’21

A panel is typically used to provide supplemental information or form inputs that relate to your primary canvas.

Panel Header

A panel body accepts any layout or component

About Panel#

A panel is docked to the left/right side of a viewport and is in the document flow of the canvas or main content.

Use this component when:

  1. The canvas content extends beyond the boundaries of the viewport, while panning and zooming is supported
  2. It is not important to see canvas content while completing the task in a Panel
  3. The task performed in a Panel is momentary

Toggling visibility of a Panel will re-flow the main content.

The panel should take up 100% of the height of its parent container. In most cases, that would be the viewport or main stage of your application.

Base#

Panel Header

A panel body accepts any layout or component
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">

The header is docked to the top of its panel. When the content of the panel body becomes overflowed, the body will provide scrolling while the header remains visible in place.

The header of a left/right docked panel has left-aligned text by default and one icon that dismisses the panel. The header title should truncate when it becomes too long for the panel width by using the slds-truncate class on the title.

Panel Header

<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">

Centered Text#

To center the header title, add the class slds-panel__header_align-center to the <div> with class slds-panel__header.

Panel Header

<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
  <div class="slds-panel__header slds-panel__header_align-center">
    <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">

Custom Header#

If a panel header requires additional elements outside of a title and close button, The panel header needs to have the class slds-panel__header_custom added to slds-panel__header. This notifies the component that it has a custom layout in the header.

<div class="slds-panel__header slds-panel__header_custom">...</div>

The h2 which contains the title of the panel requires the class slds-panel__header-title.

Invoked via Toggle#

Accessibility Requirement

When toggling the visibility, author must manage user focus by placing the user inside the panel when it opens and returning them to the trigger when it closes.

Positioning#

The slds-panel_docked element can be positioned on the left or right side of a viewport by adding the class slds-panel_docked-left or slds-panel_docked-right.

Left side#

Panel Header

A panel body accepts any layout or component
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">

Right side#

Panel Header

A panel body accepts any layout or component
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Panel Header</h2>
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header">

Drilled-In State#

Design Note

If the panel has been drilled into, then the panel displays an arrow facing to the left to indicate the direction the user drilled in from.

Accessibility Requirement

When the user drills in, the author must manage user focus by keeping the user inside the panel when it drills in and returning them to the drill-in trigger when it the user presses the back arrow.

Positioning#

Left side#

Panel Header

A panel body accepts any layout or component
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Panel Header">
      <svg class="slds-button__icon" aria-hidden="true">

Right side#

Panel Header

A panel body accepts any layout or component
<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__back" title="Collapse Panel Header">
      <svg class="slds-button__icon" aria-hidden="true">

Sizing#

The panel width can be modified by applying a sizing class to the slds-panel element.

The panels come in 5 different sizes:

WidthSLDS Class
240pxslds-size_small
320pxslds-size_medium
400pxslds-size_large
640pxslds-size_x-large
100%slds-size_full

Panel Visibility#

Open as a drawer#

A panel causes reflow by being in the flow of the layout rather than overlaid on top of the content. To achieve this, simply toggle the class slds-is-open to the slds-panel_docked element.

Panel Header

A panel body accepts any layout or component
Page Content

Panels for Filtering#

Filtering lists or reports can be done by using a Filtering expressions inside of a Panel. Check out the Filtering expression component for different states and accessibility requirements.

Accessibility Requirement

Make sure to use assistive text to improve the clarity of what you might be editing, for example, add Edit filter: to the button element inside each filterable object.

Filter

Matching all these filters

<div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-right slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Filter">Filter</h2>
    <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Filter">

Overview of CSS Classes#

Selector.slds-panel
Summary

Panel component

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-panel__section
Summary

Contains sub sections of a panel

Restrict.slds-panel div
Selector.slds-panel__actions
Summary

Contains form actions at the bottom of a panel

Restrict.slds-panel div
Selector.slds-panel__header
Summary

Header element of a panel

Restrict.slds-panel div
Selector.slds-panel__header_custom
Summary

Modifier that notifies panel header that something other than a title and close button exist

Restrict.slds-panel__header
ModifierTrue
Selector.slds-panel__header_align-center
Summary

Adjusts styling when the title of the header is centered

Restrict.slds-panel__header
ModifierTrue
Selector.slds-panel__header-title
Summary

Title of the header panel

Restrict.slds-panel__header h2
Selector.slds-panel__close
Summary

Close button of a panel

Restrict.slds-panel .slds-button
Selector.slds-panel__back
Summary

Back button of a panel drilled in

Restrict.slds-panel .slds-button
Selector.slds-panel__body
Summary

Body element of a panel

Restrict.slds-panel div
Selector.slds-panel_docked
Summary

Modifier that changes the display of a panel to dock to the viewport

Restrict.slds-panel
ModifierTrue
Selector.slds-is-open
Summary

Toggles visibility of panel

Restrict.slds-panel_docked
Selector.slds-panel_docked-left
Summary

Modifier that changes the position of a panel to the left

Restrict.slds-panel_docked
ModifierTrue
Selector.slds-panel_docked-right
Summary

Modifier that changes the position of a panel to the right

Restrict.slds-panel_docked
ModifierTrue
Selector.slds-panel_filters
Summary
Supportdev-ready
Restrict.slds-panel
VariantTrue

Panels Release Notes

2.7.0

Changed

  • Updated panel headers to have left aligned text by default. To center the header title, use the class slds-panel__header_align-center.
  • Updated slds-panel_body padding to be 0.75rem around instead of 1rem.
  • Updated our documentation to reflect that panels always have a close button, but may also have a back button if panel was invoked by drilling in.

Fixed

  • Forced panel buttons to keep their square shape by preventing flex-shrink.