diff --git a/src/components/card/card.less b/src/components/card/card.less
index 0b5a4da3fd..9b16b8f1a5 100644
--- a/src/components/card/card.less
+++ b/src/components/card/card.less
@@ -2,17 +2,18 @@
 
 .@{class-prefix-card} {
   background: var(--adm-color-background);
-  border-radius: 8px;
-  padding: 0 12px;
+  border-radius: var(--adm-card-border-radius, 8px);
+  padding: 0 var(--adm-card-padding-inline, 12px);
   &-header {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    padding: 12px 0;
+    padding: var(--adm-card-header-padding-block, 12px) 0;
     &:not(:last-child) {
-      border-bottom: solid 0.5px var(--adm-color-border);
+      border-bottom: solid var(--adm-card-header-border-width, 0.5px)
+        var(--adm-card-header-border-color, var(--adm-color-border));
     }
     &-title {
       font-size: var(--adm-font-size-7);
@@ -21,6 +22,6 @@
     }
   }
   &-body {
-    padding: 12px 0;
+    padding: var(--adm-card-body-padding-block, 12px) 0;
   }
 }
diff --git a/src/components/card/card.patch.less b/src/components/card/card.patch.less
new file mode 100644
index 0000000000..06d9083701
--- /dev/null
+++ b/src/components/card/card.patch.less
@@ -0,0 +1,19 @@
+@class-prefix-card: ~'adm-card';
+
+.@{class-prefix-card} {
+  background: #fff;
+  border-radius: 8px;
+  padding: 0 12px;
+  &-header {
+    padding: 12px 0;
+    &:not(:last-child) {
+      border-bottom: solid 0.5px #eee;
+    }
+    &-title {
+      font-size: 15px;
+    }
+  }
+  &-body {
+    padding: 12px 0;
+  }
+}
diff --git a/src/components/card/index.en.md b/src/components/card/index.en.md
index 99ba11b432..796910b8ae 100644
--- a/src/components/card/index.en.md
+++ b/src/components/card/index.en.md
@@ -25,3 +25,14 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
 | onClick | The click event of the Card | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | The click event of the header area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | The left area of the header | `ReactNode` | - |
+
+### CSS Variables
+
+| Name | Description | Default | Global |
+| --- | --- | --- | --- |
+| `--adm-card-border-radius` | Border radius of the button. | `8px` | `--adm-card-border-radius` |
+| `--adm-card-padding-inline` | Horizontal padding of the card. | `12px` | `--adm-card-padding-inline` |
+| `--adm-card-header-border-width` | Bottom border width of the card header. | `0.5px` | `--adm-card-header-border-width` |
+| `--adm-card-header-border-color` | Bottom border color of the card header. | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| `--adm-card-header-padding-block` | Vertical of the card header. | `12px` | `--adm-card-header-padding-block` |
+| `--adm-card-body-padding-block` | Vertical padding of the card body. | `12px` | `--adm-card-body-padding-block` |
diff --git a/src/components/card/index.zh.md b/src/components/card/index.zh.md
index dc44c48382..5de22c6af8 100644
--- a/src/components/card/index.zh.md
+++ b/src/components/card/index.zh.md
@@ -25,3 +25,14 @@
 | onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | header 左边区域 | `ReactNode` | - |
+
+### CSS 变量
+
+| 属性 | 说明 | 默认值 | 全局变量 |
+| --- | --- | --- | --- |
+| `--adm-card-border-radius` | 圆角大小 | `8px` | `--adm-card-border-radius` |
+| `--adm-card-padding-inline` | 水平内边距 | `12px` | `--adm-card-padding-inline` |
+| `--adm-card-header-border-width` | header 分割线宽度 | `0.5px` | `--adm-card-header-border-width` |
+| `--adm-card-header-border-color` | header 分割线颜色 | `var(--adm-color-border)` | `--adm-card-header-border-color` |
+| `--adm-card-header-padding-block` | header 垂直内边距 | `12px` | `--adm-card-header-padding-block` |
+| `--adm-card-body-padding-block` | body 垂直内边距 | `12px` | `--adm-card-body-padding-block` |