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.

Insight

When a file or item has been dropped into this component the background color should still contain its contents to communicate to the customer that the action was successful and that these files are still grouped together within the droppable component.

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.

Usage

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