Culture Amp
Menu

Well

Wells are used as a visual container around secondary content.

Also known as:
PlaceholderContent areaFrameCardGroupBoxContainer

AnchorNeed to know

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

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

When to use
  • Use a well for secondary content.
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: