Also known as:
PlaceholderContent areaFrameCardGroupBoxContainer
Well
Wells are used as a visual container around secondary content.
- Overview
- Autocomplete (not built)
- Avatar (not built)
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider
- Dropdown
- Empty State
- Filter Drawer
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- Tooltip
- Well
Need 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.
Visuals
UI Kit
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 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: