Cards indicate to a user that a group of content is actionable. Each card contains one destination; if several destinations are required, try using Well instead. Cards are always interactive and should never contain non-actionable content.
- Cards can contain images, logos, and/or detailed info that enables a user to enter the next path in their journey.
- Cards are always interactive.
- Only one action is ever permitted per Card; do not include additional links in the Card.
- Always visually indicate interactivity with the prompt prop, that visually styles the action text in the blue link style
- Use the card hierarchy (primary/secondary) to emphasize or de-emphasize actions on the page.
- A group of cards should all have the same hierarchy.
- Single cards work best with primary treatment.
Variants
Visual Variants
Development
import Card from '@nerdwallet/react-card';<Card>Inner content...</Card>;Props
<Card>
className
string
Classes to add to the containing element.
Default
null
children
node
The content to render within the Card.
component
string
Allows you to provide a React component or other HTML element, overriding the default `a` option.
Default
null
href
string
The URL to visit when clicking / tapping the Card.
primary
boolean
Flag to set the Card to have a shadow. Defaults to false.
Default
false
prompt
string
This is text used to indicate to the user that the Card is actionable. For example, "Read more".
dangerouslyForceFocusStyling
boolean
Force the component to use its focus styles.
Default
false
dangerouslyForceHoverStyling
boolean
Force the component to use its hover styles.
Default
false
dangerouslyForceActiveStyling
boolean
Force the component to use its clicked or pressed styles.
Default
false