diff --git a/doc/source/handycontrol/extend_controls/card/index.md b/doc/source/handycontrol/extend_controls/card/index.md
index 877d2fd6..894d8dfd 100644
--- a/doc/source/handycontrol/extend_controls/card/index.md
+++ b/doc/source/handycontrol/extend_controls/card/index.md
@@ -1,3 +1,207 @@
---
-title: Card
+title: Card 卡片
---
+
+`Card`卡片作为同类型信息展示块，主要有内容头部以及尾部组成，常用于做集合类控件的子级模板使用，展示相同外观不同内容的卡片式风格数据，为`ContentControl`的派生类
+
+```c#
+public class Card : ContentControl
+```
+
+# 基础属性
+
+| 属性 | 用途 |
+| ---------------------- | ------------------------------ |
+| Header | 卡片头部内容，用于显示同步文本 |
+| HeaderTemplate | 卡片头部模板 |
+| HeaderTemplateSelector | 卡片模板样式选择器 |
+| HeaderStringFormat | 卡片头部模板内容显示格式 |
+| Footer | 卡片尾部内容 |
+| FooterTemplate | 卡片尾部模板 |
+| FooterTemplateSelector | 卡片尾部样式选择器 |
+| FooterStringFormat | 卡片尾部内容显示格式 |
+
+# 案例
+
+## 单卡片使用
+
+### `xaml`中使用
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 效果
+
+
+
+## 作为数据模板
+
+### 数据类型
+
+```c#
+ public class CardModel
+ {
+ public string Header { get; set; }
+
+ public string Content { get; set; }
+
+ public string Footer { get; set; }
+ }
+```
+
+### 视图实体
+
+此实体并没有按照规范的`mvvm`方式进行设计，仅仅是作为普通数据源做展示使用
+
+```c#
+ public class CardDemoViewModel
+ {
+ private IList _dataList;
+ public CardDemoViewModel()
+ {
+ DataList = GetCardDataList();
+ }
+
+ internal ObservableCollection GetCardDataList()
+ {
+ return new ObservableCollection
+ {
+ new CardModel
+ {
+ Header = "Atomic",
+ Content = "1.jpg",
+ Footer = "Stive Morgan"
+ },
+ new CardModel
+ {
+ Header = "Zinderlong",
+ Content = "2.jpg",
+ Footer = "Zonderling"
+ },
+ new CardModel
+ {
+ Header = "Busy Doin' Nothin'",
+ Content = "3.jpg",
+ Footer = "Ace Wilder"
+ },
+ new CardModel
+ {
+ Header = "Wrong",
+ Content = "4.jpg",
+ Footer = "Blaxy Girls"
+ },
+ new CardModel
+ {
+ Header = "The Lights",
+ Content = "5.jpg",
+ Footer = "Panda Eyes"
+ },
+ new CardModel
+ {
+ Header = "EA7-50-Cent Disco",
+ Content = "6.jpg",
+ Footer = "еяхат музыка"
+ },
+ new CardModel
+ {
+ Header = "Monsters",
+ Content = "7.jpg",
+ Footer = "Different Heaven"
+ },
+ new CardModel
+ {
+ Header = "Gangsta Walk",
+ Content = "8.jpg",
+ Footer = "Illusionize"
+ },
+ new CardModel
+ {
+ Header = "Won't Back Down",
+ Content = "9.jpg",
+ Footer = "Boehm"
+ },
+ new CardModel
+ {
+ Header = "Katchi",
+ Content = "10.jpg",
+ Footer = "Ofenbach"
+ }
+ };
+ }
+ public IList DataList { get => _dataList; set => _dataList = value; }
+ }
+```
+
+### `xaml`中的使用方式
+
+`handycontrol`的命名空间和`DataContext`上下文需要自行引入
+
+```xml
+xmlns:hc="https://handyorg.github.io/handycontrol"
+xmlns:data="CardModel所在命名空间"
+xmlns:vm="CardDemoViewModel所在命名空间"
+........
+```
+
+```xml
+
+
+
+
+
+
+
+```
+
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 效果
+
+
\ No newline at end of file