# Cards

```jsx
import { Card } from 'antd'
const {Meta} = Card
```

```jsx
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
</Card>
<Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
</Card>
```

#### Card <a href="#card" id="card"></a>

| Property            | Description                                                                | Type                                 | Default   | Version |
| ------------------- | -------------------------------------------------------------------------- | ------------------------------------ | --------- | ------- |
| actions             | The action list, shows at the bottom of the Card.                          | Array\<ReactNode>                    | -         |         |
| activeTabKey        | Current TabPane's key                                                      | string                               | -         |         |
| headStyle           | Inline style to apply to the card head                                     | CSSProperties                        | -         |         |
| bodyStyle           | Inline style to apply to the card content                                  | CSSProperties                        | -         |         |
| bordered            | Toggles rendering of the border around the card                            | boolean                              | `true`    |         |
| cover               | Card cover                                                                 | ReactNode                            | -         |         |
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set.                | string                               | -         |         |
| extra               | Content to render in the top-right corner of the card                      | string\|ReactNode                    | -         |         |
| hoverable           | Lift up when hovering card                                                 | boolean                              | false     |         |
| loading             | Shows a loading indicator while the contents of the card are being fetched | boolean                              | false     |         |
| tabList             | List of TabPane's head.                                                    | Array<{key: string, tab: ReactNode}> | -         |         |
| tabBarExtraContent  | Extra content in tab bar                                                   | React.ReactNode                      | -         |         |
| size                | Size of card                                                               | `default` \| `small`                 | `default` |         |
| title               | Card title                                                                 | string\|ReactNode                    | -         |         |
| type                | Card style type, can be set to `inner` or not set                          | string                               | -         |         |
| onTabChange         | Callback when tab is switched                                              | (key) => void                        | -         |         |
| tabProps            | [Tabs](https://ant.design/components/tabs/#Tabs)                           | -                                    | -         |         |

#### Card.Grid <a href="#card.grid" id="card.grid"></a>

| Property  | Description                     | Type          | Default | Version |
| --------- | ------------------------------- | ------------- | ------- | ------- |
| className | className of container          | string        | -       |         |
| hoverable | Lift up when hovering card grid | boolean       | true    |         |
| style     | style object of container       | CSSProperties | -       |         |

#### Card.Meta <a href="#card.meta" id="card.meta"></a>

| Property    | Description               | Type          | Default | Version |
| ----------- | ------------------------- | ------------- | ------- | ------- |
| avatar      | avatar or icon            | ReactNode     | -       |         |
| className   | className of container    | string        | -       |         |
| description | description content       | ReactNode     | -       |         |
| style       | style object of container | CSSProperties | -       |         |
| title       | title content             | ReactNode     | -       |         |