Skip to content

Well

Status: Stable

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.

Examples

Default

Default wells have neutral-lightest treatment.

Yellow

This is yellow-lightest.

Props

<Well>

children

Required
ReactNode
The content to be rendered inside the Well.

className

Deprecated
string
Additional classes to apply to the Well.

color

"gray" | "green-lightest" | "neutral-lightest" | "yellow" | "yellow-lightest"
The background color of the Well. neutral-lightest is used to create a neutral background treatment. yellow-lightest is used to create a more emphasized background treatment. green-lightest is used to create a more encouraging background treatment. NOTE: We are keeping the gray and yellow colors in the list for backwards-compatibility until all uses of the Well component are updated with the new values.

padding

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">
Padding for the well. This is applied in a uniform manner.

ref

(instance: any) => void | RefObject<any>