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.
<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