Components

Panels

A panel provides contextual and detailed information based on an click or hover interaction of data by a user.

DetailDetail › DefaultDetail › Form with Inline EditDetail › Form with Inline Edit ActiveDetaildev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-panel slds-grid slds-grid--vertical slds-nowrap">
  <div class="slds-form--stacked slds-grow slds-scrollable--y">
    <div class="slds-panel__section slds-has-divider--bottom">
      <div class="slds-media">
        <div class="slds-media__figure">
          <label class="slds-checkbox" for="completed">
            <input type="checkbox" name="checkbox" id="completed" />
            <span class="slds-checkbox--faux"></span>
            <span class="slds-assistive-text">Complete Task</span>
          </label>
        </div>
        <div class="slds-media__body">
          <p class="slds-truncate slds-text-heading--small" title="Follow up on &#x27;15 contact"><a href="javascript:void(0);">Follow up on &#x27;15 contact</a></p>
          <p class="slds-truncate slds-text-body--small" title="Jun 18">Jun 18</p>
          <div class="slds-button-group slds-m-top--small" role="group">
            <button class="slds-button slds-button--neutral slds-grow">Edit</button>
            <button class="slds-button slds-button--neutral slds-grow">Follow Up</button>
            <button class="slds-button slds-button--neutral slds-grow">Delete</button>
            <button class="slds-button slds-button--icon-border-filled" title="More Actions">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">More Actions</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="slds-panel__section">
      <h3 class="slds-text-heading--small slds-m-bottom--medium">Task Information</h3>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Subject</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Follow up on &#x27;15 Contract</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Due Date</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">6/18/16</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Assigned TO</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Jason Dewar</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Name</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Adam Choi</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Related To</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Tesla Cloudhub + Anypoint Connectors</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Comments</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static slds-text-longform">Adam was open to doing more business in the 4th quarter. Follow up with marketing demo and email templates.</span>
        </div>
      </div>
    </div>
    <div class="slds-panel__section">
      <h3 class="slds-text-heading--small slds-m-bottom--medium">Additional Information</h3>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Status</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Not Started</span>
        </div>
      </div>
      <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
        <span class="slds-form-element__label">Priority</span>
        <div class="slds-form-element__control">
          <span class="slds-form-element__static">Normal</span>
        </div>
      </div>
    </div>
  </div>
</div>

FilteringFiltering › DefaultFiltering › New filterFiltering › ErrorFiltering › Locked FiltersFilteringdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-panel slds-grid slds-grid--vertical slds-nowrap slds-panel--filters">
  <div class="slds-form--stacked slds-grow slds-scrollable--y slds-grid slds-grid--vertical">
    <div class="slds-filters">
      <div class="slds-filters__header slds-grid slds-has-divider--bottom-space">
        <h4 class="slds-align-middle slds-text-heading--small">Filter</h4>
        <button class="slds-button slds-col--bump-left slds-button--icon slds-button--icon-small" title="Close Filter Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#forward"></use>
          </svg>
          <span class="slds-assistive-text">Close Filter Panel</span>
        </button>
      </div>
      <div class="slds-filters__body">
        <ol class="slds-list--vertical slds-list--vertical-space">
          <li class="slds-item slds-hint-parent">
            <div class="slds-filters__item slds-grid slds-grid--vertical-align-center">
              <a href="javascript:void(0);" class="slds-grow slds-has-blur-focus">
                <p class="slds-text-body--small">Show Me</p>
                <p>All Products</p>
              </a>
            </div>
          </li>
        </ol>
        <p class="slds-text-body--small slds-m-vertical--x-small">Matching all these filters</p>
        <ol class="slds-list--vertical slds-list--vertical-space">
          <li class="slds-item slds-hint-parent">
            <div class="slds-filters__item slds-grid slds-grid--vertical-align-center">
              <a href="javascript:void(0);" class="slds-grow slds-has-blur-focus">
                <p class="slds-text-body--small">Created Date</p>
                <p>equals THIS WEEK</p>
              </a>
              <button class="slds-button slds-button--icon slds-button--icon-small" title="Remove">
                <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
                </svg>
                <span class="slds-assistive-text">Remove</span>
              </button>
            </div>
          </li>
          <li class="slds-item slds-hint-parent">
            <div class="slds-filters__item slds-grid slds-grid--vertical-align-center">
              <a href="javascript:void(0);" class="slds-grow slds-has-blur-focus">
                <p class="slds-text-body--small">List Price</p>
                <p>greater than &quot;500&quot;</p>
              </a>
              <button class="slds-button slds-button--icon slds-button--icon-small" title="Remove">
                <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
                </svg>
                <span class="slds-assistive-text">Remove</span>
              </button>
            </div>
          </li>
        </ol>
      </div>
      <div class="slds-filters__footer slds-grid slds-shrink-none"><a href="javascript:void(0);">Add Filter</a><a href="javascript:void(0);" class="slds-col--bump-left">Remove All</a></div>
    </div>
  </div>
</div>

Component Overview

Usage

This table gives you a quick overview of the unique SLDS CSS classes that can be applied to create page headers.
Class NameUsage
.slds-panel
Applied to:

Outcome:

Initiate panel

Required:

Required

Comments:

--

.slds-panel_container
Applied to:

Outcome:

Container for panels

Required:

Required

Comments:

--

.slds-panel__section
Applied to:

Outcome:

Contains sub sections of a panel

Required:

Required

Comments:

--

.slds-panel__actions
Applied to:

Outcome:

Contains form actions at the bottom of a panel

Required:

Required

Comments:

--