Drop Zone

drop-zone

.slds-drop-zone — Screen building element to indicate to users where components may be dragged and dropped.

base

.slds-drop-zone — Creates a drop-zone component for screen building

base › Drag Over

base › With Populated Region

base › With Populated Region and Actions

base › With Cards

base › Dragging With Cards

drag over

.slds-drop-zone_drag — Modifier used to indicate that component may be dropped in container

.slds-drop-zone_drag__slot

.slds-drop-zone_drag__slot — Insertion point of drop zone

.slds-drop-zone__label

.slds-drop-zone__label — Top label of drop zone

.slds-drop-zone__label_container

.slds-drop-zone__label_container — Top of populated label of drop zone

.slds-drop-zone__label_button

.slds-drop-zone__label_button — Button within drop zone label

.slds-drop-zone__container

.slds-drop-zone__container — Populated region within drop zone

item-hovered

.slds-is-hovered — Hover state for a component within a drop zone

.slds-drop-zone__actions

.slds-drop-zone__actions — Action buttons within drop zone