Also known as:
PlaceholderContent areaFrameCardGroupBoxContainer

Well

Wells are used as a visual container around secondary content.

Need to know

  • For primary content, use a Card instead.

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: