@dotconnor/grommet
Version:
focus on the essential experience
63 lines (40 loc) • 1.15 kB
Markdown
## 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://storybook.grommet.io/?selectedKind=Layout-Card&full=0&stories=1&panelRight=0) [](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' }
```