Component Blueprints

Drop Zone

  • HTML/CSS:Dev Ready
  • Layout:Desktop Only

Sections

Screen building elements that surround areas where components can be placed. Drop Zones visually indicate to users where they may drag and drop components onto a page.

Base Drop Zone#

A Base Drop Zone outlines areas within a page where users may drag and drop a component. These create a template to guide users within a screen building experience.

<div class="slds-drop-zone">
  <div class="demo-only demo-component" style="width:100%;height:10rem"></div>
</div>

Drag Over Drop Zone#

When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped.

Content

<div class="demo-only" style="padding-top:2rem">
  <div class="slds-drop-zone slds-drop-zone_drag">
    <div class="slds-drop-zone__label">
      <div class="slds-media slds-media_center">

Insertion Point#

An insertion point is used to further communicate to the user the exact slot the component is being placed.

<div class="slds-drop-zone_drag__slot"></div>

The position of this element should be controlled by your implementation.

  • When there are no components in the drop zone: The insertion point should be placed in the center.

  • When there are components in the drop zone: The insertion point should be placed before or after components, to indicate where a new component will be placed relative to the ones already in the the drop zone.

Drop Zone Container#

Use a drop zone container to highlight components within a drop zone. This provides a label for the component, as well as Button Icons to perform actions, such as moving the component and deleting the component from the screen.

<div class="slds-drop-zone">
  <div class="demo-only demo-component" style="width:100%;height:10rem"></div>
  <div class="slds-drop-zone__container slds-is-hovered" tabindex="-1">
    <div class="slds-drop-zone__label slds-drop-zone__label_container">

Example - Cards#

<div class="demo-only" style="padding-top:2rem">
  <div class="slds-drop-zone">
    <div class="slds-drop-zone__container" tabindex="-1">
      <div class="slds-drop-zone__label slds-drop-zone__label_container">

Example - Cards Insertion#

Content

<div class="demo-only" style="padding-top:2rem">
  <div class="slds-drop-zone slds-drop-zone_drag">
    <div class="slds-drop-zone__label">
      <div class="slds-media slds-media_center">

Overview of CSS Classes#

Selector.slds-drop-zone
Summary

Creates a drop-zone component for screen building

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-drop-zone_drag
Summary

Modifier used to indicate that component may be dropped in container

Restrict.slds-drop-zone
ModifierTrue
Selector.slds-drop-zone_drag__slot
Summary

Insertion point of drop zone

Restrict.slds-drop-zone_drag div
Selector.slds-drop-zone__label
Summary

Top label of drop zone

Restrict.slds-drop-zone div
Selector.slds-drop-zone__label_container
Summary

Top of populated label of drop zone

Restrict.slds-drop-zone__label
Selector.slds-drop-zone__label_button
Summary

Button within drop zone label

Restrict.slds-drop-zone__label button
Selector.slds-drop-zone__container
Summary

Populated region within drop zone

Restrict.slds-drop-zone div
Selector.slds-is-hovered
Summary

Hover state for a component within a drop zone

Restrict.slds-drop-zone div
ModifierTrue
Selector.slds-drop-zone__actions
Summary

Action buttons within drop zone

Restrict.slds-drop-zone div

Drop Zone Release Notes

2.15.0

Changed

  • Changed flex-basis to auto for the drop zone label to fix a layout issue in IE11

2.7.0

Added

  • Added new Drop Zone component to help construct a drag and drop screen building experience