Bain Logo

Card

Jump to Props

Represent grouped information about a single subject

The Card component is designed to be very flexible. It's basically just a Box with some pre-set styling. This means you can pass all the props a Box can take.

The default look and feel of a Card is with a fairly large border radius and box shadow. You can change this, but be sure to use a consistent style throughout your app.

Import

Use

👋
🙋‍♂️
🌊

Add the content you need

Note how here we're also setting the html element to an article using the as prop.

Cards are Highly Composable

Do with them what you want

Alternative styles

You can decide however you'd like to style your cards.

Alternative Style

I've got a different shadow and border radius. Aren't I special? 🧞‍♀️

Complex Example

Rear view of modern home with pool
New

3 beds • 2 baths

Modern home in city center in the heart of historic Los Angeles

$1,900.00/ wk

34 reviews

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
boxShadownumber | string80

Drop shadow on the element. Either accesses theme.shadows or custom css value

bgstringbackground

Background color of the card. Keep default for dark mode support.

childrenReactNodenull

The content to show inside the button

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy