Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Filters
  • Gallery card
  • Indicators
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toast
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Tabs
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

Droppables

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

Default

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

Copy
<div class="droppable droppable--empty">
  <div class="droppable__area l-h-center l-v-center">
    <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

Copy
<div class="droppable droppable--empty">
  <div class="droppable__area hovering l-h-center l-v-center">
    <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