## Card
A Card is a container of information that provides access to more 
      details. Elements of a Card can include Header, Body, Footer or any 
      other custom component.

[![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Layout-Card&full=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/card&module=%2Fsrc%2FCard.js)
## Usage

```javascript
import { Card } from 'grommet';
<Card/>
```

## Properties

  
## Intrinsic element

```
div
```
## Theme
  
**card.container**

Any valid Box prop for the Card container. Expects `object`.

Defaults to

```
{ round: 'small', elevation: 'small' }
```

**card.header**

Any valid Box prop for the CardHeader. Expects `object`.

Defaults to

```
[object Object]
```

**card.body**

Any valid Box prop for the CardBody. Expects `object`.

Defaults to

```
[object Object]
```

**card.footer**

Any valid Box prop for the CardFooter container. Expects `object`.

Defaults to

```
{ background: 'background-contrast' }
```