Panels

Panels

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

Detail

Preview

No content has been added for this component.

No content has been added for this component.

<div class="demo-only slds-grid" style="height:845px;max-width:420px;background:#f4f6f9;padding:1rem;">
  <div class="slds-panel slds-grid slds-grid_vertical slds-nowrap">
    <div class="slds-form slds-form_stacked slds-grow slds-scrollable_y">
      <div class="slds-panel__section slds-border_bottom">
        <div class="slds-media">
          <div class="slds-media__figure">
            <span class="slds-checkbox">
              <input type="checkbox" name="options" id="checkbox-280" />
              <label class="slds-checkbox__label" for="checkbox-280">
                <span class="slds-checkbox_faux"></span>
                <span class="slds-form-element__label slds-assistive-text">Complete Task</span>
              </label>
            </span>
          </div>
          <div class="slds-media__body">
            <h2 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>
            </h2>
            <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 slds-button_icon-border-filled" aria-haspopup="true" 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>
        <ul>
          <li class="slds-form-element slds-hint-parent slds-border_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>
          </li>
          <li class="slds-form-element slds-hint-parent slds-border_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>
          </li>
          <li class="slds-form-element slds-hint-parent slds-border_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>
          </li>
          <li class="slds-form-element slds-hint-parent slds-border_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>
          </li>
          <li class="slds-form-element slds-hint-parent slds-border_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>
          </li>
          <li class="slds-form-element slds-hint-parent slds-border_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>
          </li>
        </ul>
      </div>
      <div class="slds-panel__section">
        <h3 class="slds-text-heading_small slds-m-bottom_medium">Additional Information</h3>
        <ul>
          <li class="slds-form-element slds-hint-parent slds-border_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>
          </li>
          <li class="slds-form-element slds-hint-parent slds-border_bottom">
            <span class="slds-form-element__label">Priority</span>
            <div class="slds-form-element__control">
              <span class="slds-form-element__static">Normal</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Overview of CSS Classes

Selector.slds-panel
Summary

Initiates a panel

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_filters
Summary
Restrict.slds-panel
VariantTrue
Selector.slds-filters
Summary
Restrict.slds-panel_filters div
Selector.slds-filters__header
Summary

Filters Header

Restrict.slds-panel_filters div
Selector.slds-filters__body
Summary

Filters Body

Restrict.slds-panel_filters div
Selector.slds-filters__footer
Summary

Filters Footer

Restrict.slds-panel_filters div
Selector.slds-filters__item
Summary

Filterable Item

Restrict.slds-panel_filters li div
Selector.slds-is-new
Summary

Indicates that a filter is new and hasn't been saved

Restrict.slds-filters__item
ModifierTrue
Selector.slds-has-error
Summary

Indicates that a filter has an error

Restrict.slds-filters__item
ModifierTrue
Selector.slds-is-locked
Summary

Indicates that a filter is locked

Restrict.slds-filters__item
ModifierTrue