Droppables

Droppables are containers that can receive draggable components and files. They help customers transfer information across the interface.

Default 

<div class="droppable">
  <div class="droppable__area">
  </div>
</div>

Description

This is the default state of droppables. This will contain items with in it so it will grow or contract based on the content within.

Empty 

<div class="droppable droppable--empty">
  <div class="droppable__area">
    <label class="droppable__instructions">Optional: Drag here to build a screener.</label>
  </div>
</div>

Description

This is the default state of Droppables. The style of this component affords items to be dropped into it.

Hover 

<div class="droppable droppable--empty">
  <div class="droppable__area hovering">
    <label class="droppable__instructions">Optional: Drag here to build a screener.</label>
  </div>
</div>

Description

In addition to the empty state, droppables respond to hover to afford that files can be dropped onto the container.

Do

  • Ensure the hover pattern is applied when a draggable component is hovered over a droppable

Don't

  • Use this component when there aren’t things being dropped into it

Accessibility

  • Does not receive :focus