Card卡片

import { Card } from 'antd';

ReactDOM.render(
  <Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
, mountNode);

import { Card } from 'antd';

ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Card title="Card title" bordered={false} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>
, mountNode);

import { Card } from 'antd';

ReactDOM.render(
  <Card style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
, mountNode);

import { Card } from 'antd';

ReactDOM.render(
  <Card style={{ width: 240 }} bodyStyle={{ padding: 0 }}>
    <div className="custom-image">
      <img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
    </div>
    <div className="custom-card">
      <h3>Europe Street beat</h3>
      <p>www.instagram.com</p>
    </div>
  </Card>
, mountNode);

.custom-image img {
  display: block;
}
.custom-card {
  padding: 10px 16px;
}
.custom-card p {
  color: #999;
}

import { Card, Col, Row } from 'antd';

ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Row>
      <Col span="8">
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span="8">
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span="8">
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
    </Row>
  </div>
, mountNode);

/* Increase grid spacing of 16px  */
.code-box-demo .ant-row {
  margin-left: -8px;
  margin-right: -8px;
}
.code-box-demo .ant-row > div {
  padding: 0 8px;
}

import { Card } from 'antd';

ReactDOM.render(
  <Card loading title="Card title" style={{ width: '34%' }}>
    Whatever content
  </Card>
, mountNode);