Add Card style and demo

components/card/demo/basic.md

@@ -1,4 +1,4 @@
-# 基本卡片
+# 典型卡片
 
 - order: 0
 
@@ -9,5 +9,9 @@
 ````jsx
 import { Card } from 'antd';
 
-ReactDOM.render(<Card title="卡片标题" extra={<a href="#">更多</a>}>卡片的内容</Card>, mountNode);
+ReactDOM.render(
+  <Card title="卡片标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
+    卡片的内容
+  </Card>
+, mountNode);
 ````

components/card/demo/grid.md

@@ -0,0 +1,36 @@
+# 栅格卡片
+
+- order: 3
+
+在系统概览页面常常和栅格进行配合。
+
+---
+
+````jsx
+import { Card, Col, Row } from 'antd';
+
+ReactDOM.render(
+  <Row>
+    <Col span="8">
+      <Card title="卡片标题">卡片的内容</Card>
+    </Col>
+    <Col span="8">
+      <Card title="卡片标题">卡片的内容</Card>
+    </Col>
+    <Col span="8">
+      <Card title="卡片标题">卡片的内容</Card>
+    </Col>
+  </Row>
+, mountNode);
+````
+
+````css
+/* 增加 16px 栅格间距 */
+.row {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+.row > div {
+  padding: 0 8px;
+}
+````

components/card/demo/no-padding.md

@@ -0,0 +1,35 @@
+# 更灵活的内容展示
+
+- order: 2
+
+可以调整默认边距，设定宽度。
+
+---
+
+````jsx
+import { Card } from 'antd';
+
+ReactDOM.render(
+  <Card style={{ width: 240 }} bodyStyle={{ padding: 0 }}>
+    <div className="custom-image">
+      <img width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
+    </div>
+    <div className="custom-card">
+      <h3>欧美街拍</h3>
+      <p>www.instagram.com</p>
+    </div>
+  </Card>
+, mountNode);
+````
+
+````css
+.custom-image img {
+  display: block;
+}
+.custom-card {
+  padding: 10px 16px;
+}
+.custom-card p {
+  color: #999;
+}
+````

components/card/demo/simple.md

@@ -0,0 +1,17 @@
+# 简洁卡片
+
+- order: 1
+
+只包含内容区域。
+
+---
+
+````jsx
+import { Card } from 'antd';
+
+ReactDOM.render(
+  <Card style={{ width: 300 }}>
+    卡片的内容
+  </Card>
+, mountNode);
+````

components/card/index.jsx

@@ -2,18 +2,21 @@ import React from 'react';
 import classNames from 'classnames';
 
 export default props => {
-  const { prefixCls = 'ant-card', className, children, extra, title, ...other } = props;
+  const { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, ...other } = props;
   const classString = classNames({
     [prefixCls]: true,
     [className]: !!className,
   });
-  return (
-    <div {...other} className={classString}>
+  const head = title ? (
     <div className={`${prefixCls}-head`}>
       <h3 className={`${prefixCls}-head-title`}>{title}</h3>
-        <span className={`${prefixCls}-head-extra`}>{extra}</span>
     </div>
-      <div className={`${prefixCls}-body`}>{children}</div>
+  ) : null;
+  return (
+    <div {...other} className={classString}>
+      {head}
+      {extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
+      <div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
     </div>
   );
 };

components/card/index.md

@@ -3,6 +3,7 @@
 - category: Components
 - chinese: 卡片
 - type: 展示
+- cols: 1
 
 ---
 
@@ -12,14 +13,14 @@
 
 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
 
+## API
+
 ```html
 <Card title="卡片标题">卡片内容</Card>
 ```
 
-## API
-
-### Select props
-
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
 | title    | 卡片标题 | React.Element   |  无  |
+| extra    | 卡片右上角的操作区域 | React.Element   |  无  |
+| bodyStyle | 内容区域自定义样式 | Object   |  无  |

style/components/card.less

@@ -3,7 +3,35 @@
 
 .@{card-prefix-cls} {
   background: #fff;
-  padding: 24px;
-  border: 1px solid @border-color-base;
   border-radius: @border-radius-sm;
+  box-shadow: @box-shadow-base;
+  font-size: @font-size-base;
+  position: relative;
+  overflow: hidden;
+
+  &-head {
+    height: 48px;
+    line-height: 48px;
+    border-bottom: 1px solid @border-color-split;
+    padding: 0 24px;
+
+    &-title {
+      font-size: 14px;
+      display: inline-block;
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  &-extra {
+    position: absolute;
+    right: 24px;
+    top: 14px;
+  }
+
+  &-body {
+    padding: 24px;
+  }
 }