---
title: Card 卡片
order: 24
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## TODO

- `Card.Grid`
- `Card.Meta`
- `Skeleton`
- `Tabs`

## 使用

### 基本使用

```jsx
import React from 'react';
import { Card } from 'baas-ui';

export default () => (
  <Card title="标题文案" extra={<a href="#">操作</a>} style={{ width: 373 }}>
    <div>这是一段长文案</div>
    <div>这是一段长文案</div>
    <div>这是一段长文案</div>
  </Card>
);
```

### 无边框

一般在灰色背景下使用，hover 下外阴影发生偏移

```jsx
import React from 'react';
import { Card } from 'baas-ui';

export default () => (
  <div style={{ padding: 32, background: '#f9f9f9' }}>
    <Card
      title="标题文案"
      bordered={false}
      extra={<a href="#">操作</a>}
      style={{ width: 373 }}
    >
      <div>这是一段长文案</div>
      <div>这是一段长文案</div>
      <div>这是一段长文案</div>
    </Card>
  </div>
);
```