Add card

components/card/demo/basic.md

@@ -0,0 +1,13 @@
+# 基本卡片
+
+- order: 0
+
+包含标题、内容、操作区域。
+
+---
+
+````jsx
+import { Card } from 'antd';
+
+ReactDOM.render(<Card title="卡片标题" extra={<a href="#">更多</a>}>卡片的内容</Card>, mountNode);
+````

components/card/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export default props => {
+  const { prefixCls = 'ant-card', className, children, extra, title, ...other } = props;
+  const classString = classNames({
+    [prefixCls]: true,
+    [className]: !!className,
+  });
+  return (
+    <div {...other} className={classString}>
+      <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>
+    </div>
+  );
+};

components/card/index.md

@@ -0,0 +1,25 @@
+# Card
+
+- category: Components
+- chinese: 卡片
+- type: 展示
+
+---
+
+通用卡片容器。
+
+## 何时使用
+
+最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
+
+```html
+<Card title="卡片标题">卡片内容</Card>
+```
+
+## API
+
+### Select props
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| title    | 卡片标题 | React.Element   |  无  |

index.js

@@ -45,6 +45,7 @@ const antd = {
   TimePicker: require('./components/time-picker'),
   Transfer: require('./components/transfer'),
   Cascader: require('./components/cascader'),
+  Card: require('./components/card'),
 };
 
 module.exports = antd;

style/components/card.less

@@ -0,0 +1,9 @@
+@card-prefix-cls: ~"@{css-prefix}card";
+@number-prefix-cls: ~"@{css-prefix}scroll-number";
+
+.@{card-prefix-cls} {
+  background: #fff;
+  padding: 24px;
+  border: 1px solid @border-color-base;
+  border-radius: @border-radius-sm;
+}

style/components/index.less

@@ -40,3 +40,4 @@
 @import "timepicker";
 @import "transfer";
 @import "cascader";
+@import "card";