3.2.1-canary.1943 • Published 4 years ago

@kaizen/well v3.2.1-canary.1943

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

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: