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

## Visuals

### UI Kit

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D1412%253A1904" allowfullscreen></iframe>

## 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](/components/card) instead.
* Don’t use a well inside well (even if there is a card separating them)
* Don’t use as a [Notification](/components/inline-notification)
* Don’t use as a [Tooltip](/components/tooltip)

## External Links

Here are some examples of other existing design systems:

- [Adobe coral UI](https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/getting-started.html).
- [Bootstrap 3 Wells](https://getbootstrap.com/docs/3.4/components/#wells).