# Card
Card provides a flexible and extensible content container.
## Usage
```jsx
import { Card, CardBody } from '@wordpress/components';
const Example = () => (
...
);
```
## Props
### isBorderless
Determines the border style of the card.
- Type: `Boolean`
- Required: No
- Default: `false`
### isElevated
Determines the elevation style of the card.
- Type: `Boolean`
- Required: No
- Default: `false`
### size
Determines the amount of padding within the component.
- Type: `String`
- Required: No
- Default: `medium`
## Sub-Components
This component provides a collection of sub-component that can be used to compose various interfaces.
- [``](./docs/body.md)
- [``](./docs/divider.md)
- [``](./docs/footer.md)
- [``](./docs/header.md)
- [``](./docs/media.md)
### Sub-Components Example
```jsx
import {
Card,
CardBody,
CardDivider,
CardFooter,
CardHeader,
CardMedia,
} from '@wordpress/components';
const Example = () => (
...
...
...
...
);
```
### Context
``'s sub-components are connected to `` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.
In the following example, the `` will render with a size of `small`:
```jsx
import { Card, CardBody } from '@wordpress/components';
const Example = () => (
...
);
```
These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `` will render it's specified size:
```jsx
import { Card, CardBody } from '@wordpress/components';
const Example = () => (
...
...
...
);
```