Well

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