diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
index deeab91b38..e51f291432 100644
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -1,18 +1,26 @@
 ---
 order: 0
-title: 典型卡片
+title:
+  zh-CN: 典型卡片
+  en-US: Basic card
 ---
 
+## zh-CN
+
 包含标题、内容、操作区域。
 
+## en-US
+
+A basic card containing a title, content and an extra corner content.
+
 ````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
-  <Card title="卡片标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
-    <p>卡片的内容</p>
-    <p>卡片的内容</p>
-    <p>卡片的内容</p>
+  <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);
 ````
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
index dd0766c775..c83805c1dc 100644
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -1,19 +1,27 @@
 ---
 order: 1
-title: 无边框
+title:
+  zh-CN: 无边框
+  en-US: No border
 ---
 
+## zh-CN
+
 在灰色背景上使用无边框的卡片。
 
+## en-US
+
+A borderless card on a gray background.
+
 ````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
   <div style={{ background: '#ECECEC', padding: '30px' }}>
-    <Card title="卡片标题" bordered={false} style={{ width: 300 }}>
-      <p>卡片的内容</p>
-      <p>卡片的内容</p>
-      <p>卡片的内容</p>
+    <Card title="Card title" bordered={false} style={{ width: 300 }}>
+      <p>Card content</p>
+      <p>Card content</p>
+      <p>Card content</p>
     </Card>
   </div>
 , mountNode);
diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md
index db607c8fdf..62d2ae23c2 100644
--- a/components/card/demo/grid.md
+++ b/components/card/demo/grid.md
@@ -1,10 +1,18 @@
 ---
 order: 4
-title: 栅格卡片
+title:
+  zh-CN: 栅格卡片
+  en-US: Grid card
 ---
 
+## zh-CN
+
 在系统概览页面常常和栅格进行配合。
 
+## en-US
+
+Cards usually cooperate with grid layout in overview page.
+
 ````jsx
 import { Card, Col, Row } from 'antd';
 
@@ -12,13 +20,13 @@ ReactDOM.render(
   <div style={{ background: '#ECECEC', padding: '30px' }}>
     <Row>
       <Col span="8">
-        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
+        <Card title="Card title" bordered={false}>Card content</Card>
       </Col>
       <Col span="8">
-        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
+        <Card title="Card title" bordered={false}>Card content</Card>
       </Col>
       <Col span="8">
-        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
+        <Card title="Card title" bordered={false}>Card content</Card>
       </Col>
     </Row>
   </div>
@@ -26,7 +34,7 @@ ReactDOM.render(
 ````
 
 ````css
-/* 增加 16px 栅格间距 */
+/* Increase grid spacing of 16px  */
 .code-box-demo .row {
   margin-left: -8px;
   margin-right: -8px;
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index dd89194a8a..d40365d2a8 100644
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -1,15 +1,23 @@
 ---
 order: 5
-title: 预加载的卡片
+title:
+  zh-CN: 预加载的卡片
+  en-US: Loading card
 ---
 
+## zh-CN
+
 数据读入前会有文本块样式。
 
+## en-US
+
+Shows a loading indicator while the contents of the card are being fetched.
+
 ````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
-  <Card loading title="卡片标题" style={{ width: '34%' }}>
+  <Card loading title="Card title" style={{ width: '34%' }}>
     Whatever content
   </Card>
 , mountNode);
diff --git a/components/card/demo/no-padding.md b/components/card/demo/no-padding.md
index ed8b37312f..177ff78c03 100644
--- a/components/card/demo/no-padding.md
+++ b/components/card/demo/no-padding.md
@@ -1,10 +1,19 @@
 ---
 order: 3
-title: 更灵活的内容展示
+title:
+  zh-CN: 更灵活的内容展示
+  en-US: Customized content
 ---
 
+## zh-CN
+
 可以调整默认边距，设定宽度。
 
+## en-US
+
+Customizing default width and margin.
+
+
 ````jsx
 import { Card } from 'antd';
 
@@ -14,7 +23,7 @@ ReactDOM.render(
       <img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
     </div>
     <div className="custom-card">
-      <h3>欧美街拍</h3>
+      <h3>Europe Street beat</h3>
       <p>www.instagram.com</p>
     </div>
   </Card>
diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md
index 5d738a457c..054179848b 100644
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@@ -1,18 +1,26 @@
 ---
 order: 2
-title: 简洁卡片
+title:
+  zh-CN: 简洁卡片
+  en-US: Simple card
 ---
 
+## zh-CN
+
 只包含内容区域。
 
+## en-US
+
+A simple card only containing a content area.
+
 ````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
   <Card style={{ width: 300 }}>
-    <p>卡片的内容</p>
-    <p>卡片的内容</p>
-    <p>卡片的内容</p>
+    <p>Card content</p>
+    <p>Card content</p>
+    <p>Card content</p>
   </Card>
 , mountNode);
 ````
diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
new file mode 100644
index 0000000000..afcd584325
--- /dev/null
+++ b/components/card/index.en-US.md
@@ -0,0 +1,24 @@
+---
+category: Components
+type: Presentation
+title: Card
+---
+
+Common card container.
+
+## When to use
+
+The most basic card container. You can use it to contain text, lists, pictures and paragraphs.
+
+## API
+
+```html
+<Card title="Card title">Card content</Card>
+```
+
+| Property     | Description           | Type     | Default       |
+|----------|----------------|----------|--------------|
+| title    | Card title | React.Element   |  -  |
+| extra    | Corner content of card | React.Element   | - |
+| bordered | Whether a border is set | Boolean   |  true  |
+| bodyStyle | Custom style for content area | Object   |  -  |
diff --git a/components/card/index.md b/components/card/index.zh-CN.md
similarity index 94%
rename from components/card/index.md
rename to components/card/index.zh-CN.md
index b0d09dfd43..7a4ad4b520 100644
--- a/components/card/index.md
+++ b/components/card/index.zh-CN.md
@@ -1,9 +1,8 @@
 ---
 category: Components
-chinese: 卡片
 type: Presentation
-cols: 1
-english: Card
+title: Card
+subtitle: 卡片
 ---
 
 通用卡片容器。