Droppables are containers that can receive draggable components and files. They help customers transfer information across the interface.
<div class="droppable">
<div class="droppable__area">
</div>
</div>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.
<div class="droppable droppable--empty">
<div class="droppable__area">
<label class="droppable__instructions">Optional: Drag here to build a screener.</label>
</div>
</div>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.<div class="droppable droppable--empty">
<div class="droppable__area hovering">
<label class="droppable__instructions">Optional: Drag here to build a screener.</label>
</div>
</div>In addition to the empty state, droppables respond to hover to afford that files can be dropped onto the container.
:focus