Standard NerdWallet 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 (e.g. <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.
Variants
Default
Yellow
Development
import Well from '@nerdwallet/react-well';<Well>Content here..</Well>;Props
<Well>
children
node
Required
The content to be rendered inside the Well.
className
string
Additional classes to apply to the Well.
Default
null
color
'gray' | 'yellow'
The background color of the Well. Yellow is used to create a more emphasized background treatment.
Default
'gray'