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

import Well from '@nerdwallet/react-well';
<Well color="yellow">This would be the content to be rendered inside the well.</Well>

Loading examples...

<Well>

children

node

Required

The content to be rendered inside the Well.


color

'gray' | 'yellow'

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

Default

'gray'

Maintainers

This component was created by FEI.

See Also