title: "Well" navTitle: "Well" summaryParagraph: Wells are used as a visual container around secondary content. tags: ["Placeholder", "Content area", "Frame", "Card", "Group", "Box", "Container"] needToKnow:

• "For primary content, use a Card instead."
• "Usually, wells are used in other components, such as Empty States and drag and drop file upload, instead of independently." demoStoryId: well-react--default-with-solid-border-kaizen-site-demo

import WhenToUseAndWhenNotToUse from "docs-components/WhenToUseAndWhenNotToUse" import WhenToUse from "docs-components/WhenToUse" import WhenNotToUse from "docs-components/WhenNotToUse"

UI Kit

Options

• Mood:
  • Default
  • Positive
  • Informative
  • Cautionary
  • Negative
  • Assertive
  • Prominent
• 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 to use and when not to use

• Use a well for secondary content.

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