Options

• Mood:
  • Default
  • Positive
  • Informative
  • Cautionary
  • Negative
• Border style:
  • Solid
  • Dashed
  • None

To keep in mind

• We need boundaries to define or contextualize secondary content. Wells can provide a way to do this visually.
• An Empty State Well defines an area that doesn’t currently have content, but could.
• A Drag & Drop Well provides a visible target to drop content into.
• An Internal Content Well helps to define, divide or shape content within a card.
• An External Content Well wraps one or more cards or pieces of content into a group.

When not to use

• For primary content, use a Card instead.
• Don’t use a well inside well (even if there is a card separating them)
• Don’t use as a Notification
• Don’t use as a Tooltip

External Links

Here are some examples of other existing design systems:

• Adobe coral UI.
• Bootstrap 3 Wells.