Well

v1.0.3 Edit this page

Wells emphasize or separate a group of information from other elements on a page. The group is NOT interactive, but an interactive element can be added to the group (eg. <Link/>, <Button/>).

Best practices:

  • A gray well helps group and separate content from the page
  • A yellow well helps emphasize content (i.e., cross-sell banner)
  • Width of well should align with the page element above or below it
  • Padding should always be added to a well; ensure padding is visually uniform on all sides
  • Maintain built-in corner-radius of 0px

Usage

Loading examples...

Props

<Well>

Background-treatment container. Used in different contexts with different colored backgrounds. For example, these allow one to indicate a more "down played" message or an emphasized message, based on color.

Name

Description

Type

Default

children

The content to be rendered inside the Well.

node

color

The background color of the Well. Yellow is used to create a more emphasized background treatment.

one of [[object Object],[object Object]]

'gray'

Maintainers

This component was created by FEI.

See Also