From 1df2fc86ff8b9fcc5f3d297cc574d0edc6eeaaf7 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Tue, 2 Sep 2025 10:33:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(doc):=20OCard=E7=BB=84=E4=BB=B6=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85=E4=B8=BB=E9=A2=98=E8=A7=84=E8=8C=83=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=EF=BC=8CCSS=E5=8F=98=E9=87=8FAPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__docs__/__case__/AscendComposite1.vue    | 40 +++++++++
 .../__docs__/__case__/AscendComposite2.vue    | 18 ++++
 .../card/__docs__/__case__/AscendImage.vue    | 36 ++++++++
 .../__docs__/__case__/AscendPlainImage1.vue   | 38 ++++++++
 .../__docs__/__case__/AscendPlainImage2.vue   | 59 ++++++++++++
 .../__docs__/__case__/AscendPlainText.vue     | 85 ++++++++++++++++++
 .../__docs__/__case__/KunpengComposite1.vue   | 43 +++++++++
 .../__docs__/__case__/KunpengComposite2.vue   | 18 ++++
 .../card/__docs__/__case__/KunpengImage.vue   | 41 +++++++++
 .../__docs__/__case__/KunpengPlainImage1.vue  | 37 ++++++++
 .../__docs__/__case__/KunpengPlainImage2.vue  | 53 +++++++++++
 .../__docs__/__case__/KunpengPlainText.vue    | 90 +++++++++++++++++++
 .../__docs__/__case__/OpenEulerComposite1.vue | 37 ++++++++
 .../__docs__/__case__/OpenEulerComposite2.vue | 18 ++++
 .../card/__docs__/__case__/OpenEulerImage.vue | 41 +++++++++
 .../__case__/OpenEulerPlainImage1.vue         | 38 ++++++++
 .../__case__/OpenEulerPlainImage2.vue         | 53 +++++++++++
 .../__docs__/__case__/OpenEulerPlainText.vue  | 88 ++++++++++++++++++
 .../src/card/__docs__/index.en-US.md          | 54 +++++++++++
 .../src/card/__docs__/index.zh-CN.md          | 53 +++++++++++
 20 files changed, 940 insertions(+)
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendImage.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue
 create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue

diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue b/packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue
new file mode 100644
index 00000000..60845fe0
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue
@@ -0,0 +1,40 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 复合卡片
+
+昇腾主题文本按钮有特殊的交互效果：
+
+参考：[文本按钮](/zh-CN/components/button#文本按钮（无背景，无线框）)
+
+<!-- en-US -->
+
+#### Composite Cards
+
+The Ascend theme provides special interaction effects for text buttons:
+
+Reference: [Text Button](/en-US/components/button#text-buttons-(no-background%2C-no-border))
+</docs>
+<script setup lang="ts">
+import { OCard, OLink } from '@opensig/opendesign';
+</script>
+<template>
+  <OCard title="Composite card title" detail="Composite card detail" cover="/card-cover.jpg" class="c-card-kunpeng composite-image-card">
+    <template #footer>
+      <OLink tag="span" hover-underline class="row-item c-link-ascend"
+        >Text Button<template #suffix><OIconChevronRight /></template
+      ></OLink>
+      <OLink hover-underline class="row-item c-link-ascend"
+        >Text Arrow Button<template #suffix><div class="c-link-ascend-arrow"></div></template
+      ></OLink>
+    </template>
+  </OCard>
+</template>
+<style lang="scss" scoped>
+.composite-image-card {
+  max-width: 360px;
+}
+.row-item + .row-item {
+  margin-left: 16px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue b/packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue
new file mode 100644
index 00000000..15fdf65d
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OCard, OLink, OButton, OIconSkill } from '@opensig/opendesign';
+</script>
+<template>
+  <OCard title="Composite card title" detail="Composite card detail" :icon="OIconSkill" class="c-card-kunpeng">
+    <template #footer>
+      <OButton round="pill" color="primary" size="medium" class="row-item">Button</OButton>
+      <OLink hover-underline class="row-item c-link-ascend"
+        >Text Arrow Button<template #suffix><div class="c-link-ascend-arrow"></div></template
+      ></OLink>
+    </template>
+  </OCard>
+</template>
+<style lang="scss" scoped>
+.row-item + .row-item {
+  margin-left: 16px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendImage.vue b/packages/opendesign/src/card/__docs__/__case__/AscendImage.vue
new file mode 100644
index 00000000..466f1304
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/AscendImage.vue
@@ -0,0 +1,36 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 图文卡片
+
+<!-- en-US -->
+
+#### Image-Text card
+</docs>
+<script setup lang="ts">
+import { OCard } from '@opensig/opendesign';
+</script>
+<template>
+  <div class="card-group">
+    <OCard title="Image card title" detail="Image card detail" cover="/card-cover.jpg" hoverable cursor="pointer" class="card-item" />
+    <OCard layout="h" title="Image card title" detail="Image card detail" cover="/card-cover.jpg" hoverable cursor="pointer" class="card-item" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.card-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+.card-item {
+  width: 50%;
+}
+@media (max-width: 840px) {
+  .card-group {
+    flex-direction: column;
+  }
+  .card-item {
+    width: auto;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue
new file mode 100644
index 00000000..692cb27c
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue
@@ -0,0 +1,38 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 纯图卡片
+
+纯图卡片使用 `OFigure` 组件实现：
+
+1. 当内容在卡片底部时，使用 `title` 插槽插入文案
+2. 当内容从上部开始，使用 `default` 插槽插入内容。深色背景图片可使用使用深色主题，浅色背景图片可使用浅色主题，从而提高内容的对比度。
+3. 可交互的纯图卡片要求鼠标悬停或按下时放大图片，需设置`hoverable`属性为`true`
+4. 给 `OFigure` 添加 `c-figure-ascend-radius` 类名使用 `L` 尺寸的圆角，添加 `c-figure-ascend-xl-radius` 类名使用 `XL` 尺寸的圆角
+
+<!-- en-US -->
+
+#### Image-Only Card
+
+Image-Only Cards are implemented using the `OFigure` component:
+
+1. When content is at the bottom of the card, use the `title` slot to insert text.
+2. When content starts from the top, use the `default` slot to insert content.
+   For dark background images, the dark theme can be used; for light background images, the light theme can be used to improve content contrast.
+3. Interactive Image-Only Cards require images to zoom in when hovered over or pressed. Set the `hoverable` property to `true`.
+4. Add the `c-figure-ascend-radius` class to `OFigure` to use the L-sized border radius,
+   and add the `c-figure-ascend-xl-radius` class to use the XL-sized border radius.
+</docs>
+<script setup lang="ts">
+import { OFigure } from '@opensig/opendesign';
+</script>
+<template>
+  <OFigure src="/card-cover.jpg" hoverable class="plain-image-card c-figure-ascend-radius">
+    <template #title>Image card text</template>
+  </OFigure>
+</template>
+<style lang="scss" scoped>
+.plain-image-card {
+  max-width: 600px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue
new file mode 100644
index 00000000..afe763ae
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { OFigure, OButton, OLink, OIconChevronRight } from '@opensig/opendesign';
+</script>
+<template>
+  <OFigure src="/card-cover.jpg" hoverable class="plain-image-card c-figure-ascend-radius">
+    <!-- data-o-theme="k.dark" to use kunpeng dart theme-->
+    <div data-o-theme="a.dark" class="main">
+      <div class="title">Image card title</div>
+      <div class="detail">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        Id minima deserunt distinctio officiis corporis ut,
+        atque deleniti tempora perferendis totam eos similique obcaecati magni in voluptatibus,
+        animi repudiandae, minus aliquid?
+      </div>
+      <div class="footer">
+        <OButton round="pill" color="primary" size="medium">Button</OButton>
+        <OLink tag="span" hover-underline class="c-link-kunpeng"
+          >Text Button<template #suffix><OIconChevronRight /></template
+        ></OLink>
+      </div>
+    </div>
+  </OFigure>
+</template>
+<style lang="scss" scoped>
+.plain-image-card {
+  max-width: 600px;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.title {
+  color: var(--o-color-info1);
+  font-size: var(--o3-font_size-h2);
+  line-height: var(--o3-line_height-h2);
+  font-weight: 500;
+}
+.detail {
+  color: var(--o-color-info2);
+  font-size: var(--o3-font_size-text2);
+  line-height: var(--o3-line_height-text2);
+  text-align: center;
+  max-width: 420px;
+  margin: var(--o3-gap-4) 12px 0px 12px;
+  max-height: calc(var(--o3-line_height-text2) * 3);
+  overflow: hidden;
+}
+.footer {
+  display: flex;
+  gap: var(--o3-gap-5);
+  align-items: center;
+  margin-top: var(--o3-gap-5);
+  font-size: var(--o-font_size-text1);
+  line-height: var(--o-line_height-text1);
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue b/packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue
new file mode 100644
index 00000000..fd8fe7b4
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue
@@ -0,0 +1,85 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 昇腾主题规范
+
+可交互卡片需满足以下视觉要求：
+
+鼠标悬停或按下时
+
+- 阴影：设置`:hoverable="true"`
+- 极光色：给 `OCard` 添加 `c-card-ascend-hover` 类名
+
+昇腾主题中卡片圆角有 XL 和 L 两种尺寸（默认为 L 尺寸），若使用 XL 尺寸，则添加`c-card-ascend-xl-radius`类名
+
+注意事项：`OCard`具有`href`属性时默认开启阴影效果，不用再设置`:hoverable="true"`
+
+#### 文本卡片 & 图标卡片
+
+<!-- en-US -->
+
+### Ascend Theme Specifications
+
+Interactive cards must meet the following visual requirements:
+
+On hover or press:
+
+- Shadow: Set `:hoverable="true"`
+- Ascend Color: Add the `c-card-ascend-hover` class to `OCard`
+
+The Ascend theme supports two border-radius sizes for cards: XL and L (default is L). To use the XL size, add the `c-card-ascend-xl-radius` class.
+
+Note: When the `OCard` has an `href` attribute, the shadow effect is enabled by default. There is no need to set `:hoverable="true"`.
+
+#### Text Cards & Icon Cards
+</docs>
+
+<script setup lang="ts">
+import { OCard, ORate, OIconTime, OIconSkill } from '@opensig/opendesign';
+
+const LOREM =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+<template>
+  <OCard title="Text card title" detail="Text card with XL radius" hoverable cursor="pointer" class="c-card-ascend-hover c-card-ascend-xl-radius">
+    <template #footer>
+      <div class="footer-box">
+        <div class="left">
+          <ORate color="primary" :default-value="1" readonly :count="1" />
+          <span class="rate-label">4.0</span>
+        </div>
+        <div class="right">
+          <div v-for="i in 3" :key="i" class="right-item">
+            <OIconTime class="item-icon" />
+            <span class="item-label">Label</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </OCard>
+  <OCard title="Icon card title" :detail="LOREM" :detail-max-row="2" :detail-row="2" :icon="OIconSkill" href="/" class="c-card-ascend-hover" />
+  <OCard layout="h" title="Icon card title" :detail="LOREM" :detail-max-row="2" :detail-row="2" :icon="OIconSkill" href="/" class="c-card-ascend-hover" />
+</template>
+<style lang="scss" scoped>
+.c-card-ascend-hover + .c-card-ascend-hover {
+  margin-top: var(--o-gap-4);
+}
+.footer-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.right {
+  display: flex;
+}
+.item-icon {
+  font-size: var(--o-icon_size-xs);
+}
+.rate-label,
+.item-label {
+  margin-left: var(--o-gap-2);
+}
+.right-item + .right-item {
+  margin-left: var(--o-gap-4);
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue
new file mode 100644
index 00000000..f524836c
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue
@@ -0,0 +1,43 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 复合卡片
+
+鲲鹏主题要求文本按钮 hover 时文字变红并显示红色下划线：
+
+1. 使用 `OLink` 组件
+2. 设置 `:hover-underline="true"` 且添加 `c-link-kunpeng` 类名
+
+参考：[文本按钮](/zh-CN/components/button#文本按钮（无背景，无线框）)
+
+<!-- en-US -->
+
+#### Composite Card
+
+The Kunpeng Theme requires that the text of a text button turns red and displays a red underline on hover:
+
+1. Use the `OLink` component
+2. Set `:hover-underline="true"` and add the `c-link-kunpeng` class name
+
+Reference: [Text Button](/en-US/components/button#text-buttons-(no-background%2C-no-border))
+</docs>
+<script setup lang="ts">
+import { OCard, OLink } from '@opensig/opendesign';
+</script>
+<template>
+  <OCard title="Composite card title" detail="Composite card detail" cover="/card-cover.jpg" class="c-card-kunpeng composite-image-card">
+    <template #footer>
+      <OLink v-for="i in 2" :key="i" tag="span" hover-underline class="c-link-kunpeng row-item"
+        >Text Button<template #suffix><OIconChevronRight /></template
+      ></OLink>
+    </template>
+  </OCard>
+</template>
+<style lang="scss" scoped>
+.composite-image-card {
+  max-width: 360px;
+}
+.row-item + .row-item {
+  margin-left: 16px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue
new file mode 100644
index 00000000..1e060f8a
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OCard, OLink, OButton, OIconSkill } from '@opensig/opendesign';
+</script>
+<template>
+  <OCard title="Composite card title" detail="Composite card detail" :icon="OIconSkill" class="c-card-kunpeng">
+    <template #footer>
+      <OButton round="pill" color="primary" size="medium" class="row-item">Button</OButton>
+      <OLink tag="span" hover-underline class="c-link-kunpeng row-item"
+        >Text Button<template #suffix><OIconChevronRight /></template
+      ></OLink>
+    </template>
+  </OCard>
+</template>
+<style lang="scss" scoped>
+.row-item + .row-item {
+  margin-left: 16px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue
new file mode 100644
index 00000000..a25c038d
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue
@@ -0,0 +1,41 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 图文卡片
+
+鲲鹏主题中封面图片与卡片边缘之间没有间距，可以给 `OCard` 添加 `c-card-kunpeng` 类名应用该样式。
+
+<!-- en-US -->
+
+#### Image-Text Card
+
+In the Kunpeng Theme, there is no spacing between the cover image and the card edge.
+You can add the `c-card-kunpeng` class name to the `OCard` component to apply this styling.
+</docs>
+<script setup lang="ts">
+import { OCard } from '@opensig/opendesign';
+</script>
+<template>
+  <div class="card-group">
+    <OCard title="Image card title" detail="Image card detail" cover="/card-cover.jpg" hoverable cursor="pointer" class="c-card-kunpeng" />
+    <OCard layout="h" title="Image card title" detail="Image card detail" cover="/card-cover.jpg" hoverable cursor="pointer" class="c-card-kunpeng" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.card-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+.c-card-kunpeng {
+  width: 50%;
+}
+@media (max-width: 840px) {
+  .card-group {
+    flex-direction: column;
+  }
+  .c-card-kunpeng {
+    width: auto;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue
new file mode 100644
index 00000000..a5eec55a
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue
@@ -0,0 +1,37 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 纯图卡片
+
+纯图卡片使用 `OFigure` 组件实现：
+
+1. 当内容在卡片底部时，使用 `title` 插槽插入文案
+2. 当内容从上部开始，使用 `default` 插槽插入内容。深色背景图片可使用使用深色主题，浅色背景图片可使用浅色主题，从而提高内容的对比度。
+3. 可交互的纯图卡片要求鼠标悬停或按下时放大图片，需设置`hoverable`属性为`true`
+4. 可通过给 `OFigure` 添加 `c-figure-kunpeng-radius` 类名应用符合规范的卡片圆角样式
+
+<!-- en-US -->
+
+#### Image-Only Card
+
+The Image-Only Card is implemented using the `OFigure` component:
+
+1. When content is positioned at the bottom of the card, use the `title` slot to insert text.
+2. When content starts from the top of the card, use the `default` slot to insert content.
+   For dark background images, the dark theme can be applied; for light background images, the light theme can be applied to improve content contrast.
+3. Interactive Image-Only Cards require images to enlarge on hover or press. Set the `hoverable` prop to `true`.
+4. A spec-compliant card border radius style can be applied by adding the `c-figure-kunpeng-radius` class name to `OFigure`.
+</docs>
+<script setup lang="ts">
+import { OFigure } from '@opensig/opendesign';
+</script>
+<template>
+  <OFigure src="/card-cover.jpg" hoverable class="plain-image-card c-figure-kunpeng-radius">
+    <template #title>Image card text</template>
+  </OFigure>
+</template>
+<style lang="scss" scoped>
+.plain-image-card {
+  max-width: 600px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue
new file mode 100644
index 00000000..b355caf4
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { OFigure, OButton, OLink, OIconChevronRight } from '@opensig/opendesign';
+</script>
+<template>
+  <OFigure src="/card-cover.jpg" hoverable class="plain-image-card c-figure-kunpeng-radius">
+    <!-- data-o-theme="k.dark" to use kunpeng dart theme-->
+    <div data-o-theme="k.dark" class="main">
+      <div class="title">Image card title</div>
+      <div class="detail">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        Id minima deserunt distinctio officiis corporis ut,
+        atque deleniti tempora perferendis totam eos similique obcaecati magni in voluptatibus,
+        animi repudiandae, minus aliquid?
+      </div>
+      <div class="footer">
+        <OButton round="pill" color="primary" size="medium">Button</OButton>
+        <OLink tag="span" hover-underline class="c-link-kunpeng"
+          >Text Button<template #suffix><OIconChevronRight /></template
+        ></OLink>
+      </div>
+    </div>
+  </OFigure>
+</template>
+<style lang="scss" scoped>
+.plain-image-card {
+  max-width: 600px;
+}
+.main {
+  padding: var(--o3-gap-6);
+}
+.title {
+  color: var(--o-color-info1);
+  font-size: var(--o3-font_size-h2);
+  line-height: var(--o3-line_height-h2);
+  font-weight: 500;
+}
+.detail {
+  color: var(--o-color-info2);
+  margin-top: var(--o3-gap-4);
+  font-size: var(--o3-font_size-text2);
+  line-height: var(--o3-line_height-text2);
+  max-height: calc(var(--o3-line_height-text2) * 2);
+  overflow: hidden;
+}
+.footer {
+  display: flex;
+  gap: var(--o3-gap-5);
+  align-items: center;
+  margin-top: var(--o3-gap-5);
+  font-size: var(--o3-font_size-text1);
+  line-height: var(--o3-line_height-text1);
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue
new file mode 100644
index 00000000..c9e0eea4
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue
@@ -0,0 +1,90 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 鲲鹏主题规范
+
+可交互卡片需满足以下视觉要求：
+
+鼠标悬停或按下时
+
+- 文字颜色：红色（需设置`:hoverable="true"`和`cursor="pointer"`）
+- 图标颜色：红色（需设置`:hoverable="true"`）
+- 阴影：禁用
+
+注意事项：
+
+1. 必须添加`c-card-kunpeng`类名以应用主题样式
+2. `OCard`具有`href`属性时默认开启文字及图标交互效果，不用再设置`:hoverable="true"`及`cursor="pointer"`属性
+
+#### 文本卡片 & 图标卡片
+
+<!-- en-US -->
+
+### Kunpeng Theme Specifications
+
+Interactive cards must meet the following visual requirements:
+
+On hover or press:
+
+- Text color: Red (requires setting `:hoverable="true"` and `cursor="pointer"`)
+- Icon color: Red (requires setting `:hoverable="true"`)
+- Shadow: Disabled
+
+Notes:
+
+1. The `c-card-kunpeng` class name must be added to apply theme styles
+2. When the `OCard` has an `href` attribute, text and icon interaction effects are enabled by default.
+   There is no need to set the `:hoverable="true"` and `cursor="pointer"` properties
+
+#### Text Cards & Icon Cards
+</docs>
+
+<script setup lang="ts">
+import { OCard, ORate, OIconTime, OIconSkill } from '@opensig/opendesign';
+
+const LOREM =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+<template>
+  <OCard title="Text card title" detail="Text card detail" hoverable cursor="pointer" class="c-card-kunpeng">
+    <template #footer>
+      <div class="footer-box">
+        <div class="left">
+          <ORate color="primary" :default-value="1" readonly :count="1" />
+          <span class="rate-label">4.0</span>
+        </div>
+        <div class="right">
+          <div v-for="i in 3" :key="i" class="right-item">
+            <OIconTime class="item-icon" />
+            <span class="item-label">Label</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </OCard>
+  <OCard title="Icon card title" :detail="LOREM" :detail-max-row="2" :detail-row="2" :icon="OIconSkill" href="/" class="c-card-kunpeng" />
+  <OCard layout="h" title="Icon card title" :detail="LOREM" :detail-max-row="2" :detail-row="2" :icon="OIconSkill" href="/" class="c-card-kunpeng" />
+</template>
+<style lang="scss" scoped>
+.c-card-kunpeng + .c-card-kunpeng {
+  margin-top: var(--o-gap-4);
+}
+.footer-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.right {
+  display: flex;
+}
+.item-icon {
+  font-size: var(--o-icon_size-xs);
+}
+.rate-label,
+.item-label {
+  margin-left: var(--o-gap-2);
+}
+.right-item + .right-item {
+  margin-left: var(--o-gap-4);
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue
new file mode 100644
index 00000000..db5fbf19
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue
@@ -0,0 +1,37 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 复合卡片
+
+欧拉主题中文本按钮无下划线，因此 `OLink` 组件的 `underline` 属性应设置为 `false`（默认值）
+
+参考：[文本按钮](/zh-CN/components/button#文本按钮（无背景，无线框）)
+
+<!-- en-US -->
+
+#### Composite Card
+
+In the Euler Theme, text buttons have no underline, so the `underline` prop of the `OLink` component should be set to `false` (default value).
+
+Reference: [Text Button](/en-US/components/button#text-buttons-(no-background%2C-no-border))
+</docs>
+<script setup lang="ts">
+import { OCard, OLink } from '@opensig/opendesign';
+</script>
+<template>
+  <OCard title="Composite card title" detail="Composite card detail" cover="/card-cover.jpg" class="c-card-openeuler composite-image-card">
+    <template #footer>
+      <OLink v-for="i in 2" :key="i" tag="span" class="row-item"
+        >Text Button<template #suffix><OIconChevronRight /></template
+      ></OLink>
+    </template>
+  </OCard>
+</template>
+<style lang="scss" scoped>
+.composite-image-card {
+  max-width: 360px;
+}
+.row-item + .row-item {
+  margin-left: 16px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue
new file mode 100644
index 00000000..8f6cad55
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OCard, OLink, OButton, OIconSkill } from '@opensig/opendesign';
+</script>
+<template>
+  <OCard title="Composite card title" detail="Composite card detail" :icon="OIconSkill" class="c-card-openeuler">
+    <template #footer>
+      <OButton round="pill" color="primary" size="medium" class="row-item">Button</OButton>
+      <OLink tag="span" class="row-item"
+        >Text Button<template #suffix><OIconChevronRight /></template
+      ></OLink>
+    </template>
+  </OCard>
+</template>
+<style lang="scss" scoped>
+.row-item + .row-item {
+  margin-left: 16px;
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue
new file mode 100644
index 00000000..a3073a68
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue
@@ -0,0 +1,41 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 图文卡片
+
+欧拉主题中图片与卡片之间没有间距，可以给 `OCard` 添加 `c-card-openeuler` 类名应用该样式。
+
+<!-- en-US -->
+
+#### Image-Text Card
+
+In the Euler Theme, there is no spacing between the image and the card.
+You can add the `c-card-openeuler` class name to the `OCard` component to apply this styling.
+</docs>
+<script setup lang="ts">
+import { OCard } from '@opensig/opendesign';
+</script>
+<template>
+  <div class="card-group">
+    <OCard title="Image card title" detail="Image card detail" cover="/card-cover.jpg" hoverable cursor="pointer" class="c-card-openeuler" />
+    <OCard layout="h" title="Image card title" detail="Image card detail" cover="/card-cover.jpg" hoverable cursor="pointer" class="c-card-openeuler" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.card-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+.c-card-openeuler {
+  width: 50%;
+}
+@media (max-width: 840px) {
+  .card-group {
+    flex-direction: column;
+  }
+  .c-card-openeuler {
+    width: auto;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue
new file mode 100644
index 00000000..3255aa42
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue
@@ -0,0 +1,38 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 纯图卡片
+
+纯图卡片使用 `OFigure` 组件实现：
+
+1. 当内容在卡片底部时，使用 `title` 插槽插入文案
+2. 当内容从上部开始，使用 `default` 插槽插入内容。深色背景图片可使用使用深色主题，浅色背景图片可使用浅色主题，从而提高内容的对比度。
+3. 可交互的纯图卡片要求鼠标悬停或按下时放大图片，需设置`hoverable`属性为`true`
+4. 可通过给 `OFigure` 添加 `c-figure-openeuler-radius` 类名应用符合规范的卡片圆角样式
+
+<!-- en-US -->
+
+#### Image-Only Card
+
+The Image-Only Card is implemented using the `OFigure` component:
+
+1. When content is positioned at the bottom of the card, use the `title` slot to insert text.
+2. When content starts from the top of the card, use the `default` slot to insert content.
+   For dark background images, the dark theme can be applied; for light background images, the light theme can be applied to improve content contrast.
+3. Interactive Image-Only Cards require images to enlarge on hover or press. Set the `hoverable` prop to `true`.
+4. A spec-compliant card border radius style can be applied by adding the `c-figure-openeuler-radius` class name to `OFigure`.
+</docs>
+<script setup lang="ts">
+import { OFigure } from '@opensig/opendesign';
+</script>
+<template>
+  <OFigure src="/card-cover.jpg" hoverable class="plain-image-card c-figure-openeuler-radius">
+    <template #title>Image card text</template>
+  </OFigure>
+</template>
+<style lang="scss" scoped>
+.plain-image-card {
+  max-width: 600px;
+}
+</style>
+
diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue
new file mode 100644
index 00000000..c01f6cb4
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { OFigure, OButton, OLink, OIconChevronRight } from '@opensig/opendesign';
+</script>
+<template>
+  <OFigure src="/card-cover.jpg" hoverable class="plain-image-card c-figure-openeuler-radius">
+    <!-- data-o-theme="e.dark" to use kunpeng dart theme-->
+    <div data-o-theme="e.dark" class="main">
+      <div class="title">Image card title</div>
+      <div class="detail">
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        Id minima deserunt distinctio officiis corporis ut,
+        atque deleniti tempora perferendis totam eos similique obcaecati magni in voluptatibus,
+        animi repudiandae, minus aliquid?
+      </div>
+      <div class="footer">
+        <OButton round="pill" color="primary" size="medium">Button</OButton>
+        <OLink tag="span"
+          >Text Button<template #suffix><OIconChevronRight /></template
+        ></OLink>
+      </div>
+    </div>
+  </OFigure>
+</template>
+<style lang="scss" scoped>
+.plain-image-card {
+  max-width: 600px;
+}
+.main {
+  padding: var(--o3-gap-6);
+}
+.title {
+  color: var(--o-color-info1);
+  font-size: var(--o3-font_size-h2);
+  line-height: var(--o3-line_height-h2);
+  font-weight: 500;
+}
+.detail {
+  color: var(--o-color-info2);
+  margin-top: var(--o3-gap-4);
+  font-size: var(--o3-font_size-text2);
+  line-height: var(--o3-line_height-text2);
+  max-height: calc(var(--o3-line_height-text2) * 2);
+  overflow: hidden;
+}
+.footer {
+  display: flex;
+  gap: var(--o3-gap-5);
+  align-items: center;
+  margin-top: var(--o3-gap-5);
+  font-size: var(--o3-font_size-text1);
+  line-height: var(--o3-line_height-text1);
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue
new file mode 100644
index 00000000..869eeb48
--- /dev/null
+++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue
@@ -0,0 +1,88 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 欧拉主题规范
+
+可交互卡片需满足以下视觉要求：
+
+鼠标悬停或按下时
+
+- 文字颜色：主题色（需设置`:hoverable="true"`和`cursor="pointer"`）
+- 显示阴影：（需设置`:hoverable="true"`）
+
+注意事项：
+
+1. 必须添加`c-card-openeuler`类名以应用主题样式
+2. `OCard`具有`href`属性时默认开启文字及图标交互效果，不用再设置`:hoverable="true"`及`cursor="pointer"`属性
+
+#### 文本卡片 & 图标卡片
+
+<!-- en-US -->
+
+### Euler Theme Specifications
+
+Interactive cards must meet the following visual requirements:
+
+When hovering or pressing:
+
+- Text color: Primary Color (requires setting `:hoverable="true"` and `cursor="pointer"`)
+- Display Shadow: (requires setting `:hoverable="true"`)
+
+Notes:
+
+1. Must add the `c-card-openeuler` class name to apply the theme styles.
+2. When the `OCard` has an `href` attribute, text and icon interaction effects are automatically enabled,
+so there is no need to set `:hoverable="true"` or `cursor="pointer"`.
+
+#### Text Card & Icon Card
+</docs>
+
+<script setup lang="ts">
+import { OCard, ORate, OIconTime, OIconSkill } from '@opensig/opendesign';
+
+const LOREM =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+<template>
+  <OCard title="Text card title" detail="Text card detail" hoverable cursor="pointer" class="c-card-openeuler">
+    <template #footer>
+      <div class="footer-box">
+        <div class="left">
+          <ORate color="primary" :default-value="1" readonly :count="1" />
+          <span class="rate-label">4.0</span>
+        </div>
+        <div class="right">
+          <div v-for="i in 3" :key="i" class="right-item">
+            <OIconTime class="item-icon" />
+            <span class="item-label">Label</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </OCard>
+  <OCard title="Icon card title" :detail="LOREM" :detail-max-row="2" :detail-row="2" :icon="OIconSkill" href="/" class="c-card-openeuler" />
+  <OCard layout="h" title="Icon card title" :detail="LOREM" :detail-max-row="2" :detail-row="2" :icon="OIconSkill" href="/" class="c-card-openeuler" />
+</template>
+<style lang="scss" scoped>
+.c-card-openeuler + .c-card-openeuler {
+  margin-top: var(--o-gap-4);
+}
+.footer-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.right {
+  display: flex;
+}
+.item-icon {
+  font-size: var(--o-icon_size-xs);
+}
+.rate-label,
+.item-label {
+  margin-left: var(--o-gap-2);
+}
+.right-item + .right-item {
+  margin-left: var(--o-gap-4);
+}
+</style>
diff --git a/packages/opendesign/src/card/__docs__/index.en-US.md b/packages/opendesign/src/card/__docs__/index.en-US.md
index d14192e2..238eaf32 100644
--- a/packages/opendesign/src/card/__docs__/index.en-US.md
+++ b/packages/opendesign/src/card/__docs__/index.en-US.md
@@ -9,6 +9,60 @@ sidebar: OCard
 <!-- @usage CardUsage -->
 <!-- @case CardSlot -->
 
+<!-- @case:k KunpengPlainText -->
+<!-- @case:k KunpengImage -->
+<!-- @case:k KunpengComposite1 -->
+<!-- @case:k KunpengComposite2 -->
+<!-- @case:k KunpengPlainImage1 -->
+<!-- @case:k KunpengPlainImage2 -->
+
+<!-- @case:e OpenEulerPlainText -->
+<!-- @case:e OpenEulerImage -->
+<!-- @case:e OpenEulerComposite1 -->
+<!-- @case:e OpenEulerComposite2 -->
+<!-- @case:e OpenEulerPlainImage1 -->
+<!-- @case:e OpenEulerPlainImage2 -->
+
+<!-- @case:a AscendPlainText -->
+<!-- @case:a AscendImage -->
+<!-- @case:a AscendComposite1 -->
+<!-- @case:a AscendComposite2 -->
+<!-- @case:a AscendPlainImage1 -->
+<!-- @case:a AscendPlainImage2 -->
+
 ## API
 
+### CSS 变量
+
+| CSS Variables | Description |
+| --- | --- |
+| \-\-card-bg-color | Background color |
+| \-\-card-radius | Border radius |
+| \-\-card-shadow | Shadow in normal state |
+| \-\-card-shadow-hover | Shadow in hover state |
+| \-\-card-shadow-active | Shadow in active state |
+| \-\-card-cover-radius | Cover border radius |
+| \-\-card-h-cover-width | Horizontal cover width (effective in horizontal layout) |
+| \-\-card-h-cover-max-width | Maximum horizontal cover width (effective in horizontal layout) |
+| \-\-card-main-padding-v | Vertical padding of main content area |
+| \-\-card-main-padding-h | Horizontal padding of main content area |
+| \-\-card-main-padding | Defines the main content padding by combining vertical and horizontal padding values: `var(--card-main-padding-v) var(--card-main-padding-h)` |
+| \-\-card-icon-gap | Spacing between icon and content: bottom margin in vertical layout, right margin in horizontal layout, left margin in reverse horizontal layout |
+| \-\-card-icon-color | Icon color |
+| \-\-card-icon-size | Icon size |
+| \-\-card-header-color | Header color |
+| \-\-card-header-text-size | Header text size |
+| \-\-card-header-text-height | Header text height |
+| \-\-card-title-word-break | Word-break property value for title |
+| \-\-card-content-gap | Spacing between title and content |
+| \-\-card-content-color | Content color |
+| \-\-card-content-text-size | Content text size |
+| \-\-card-content-text-height | Content text height |
+| \-\-card-detail-word-break | Word-break property value for detail |
+| \-\-card-footer-gap | Spacing between footer and content |
+| \-\-card-footer-color | Footer color |
+| \-\-card-footer-text-size | Footer text size |
+| \-\-card-footer-text-height | Footer text height |
+| \-\-card-cover-padding | Cover padding |
+
 <!-- @api OCard -->
diff --git a/packages/opendesign/src/card/__docs__/index.zh-CN.md b/packages/opendesign/src/card/__docs__/index.zh-CN.md
index 1d36e822..7ae4cb77 100644
--- a/packages/opendesign/src/card/__docs__/index.zh-CN.md
+++ b/packages/opendesign/src/card/__docs__/index.zh-CN.md
@@ -9,6 +9,59 @@ sidebar: OCard 卡片
 <!-- @usage CardUsage -->
 <!-- @case CardSlot -->
 
+<!-- @case:k KunpengPlainText -->
+<!-- @case:k KunpengImage -->
+<!-- @case:k KunpengComposite1 -->
+<!-- @case:k KunpengComposite2 -->
+<!-- @case:k KunpengPlainImage1 -->
+<!-- @case:k KunpengPlainImage2 -->
+
+<!-- @case:e OpenEulerPlainText -->
+<!-- @case:e OpenEulerImage -->
+<!-- @case:e OpenEulerComposite1 -->
+<!-- @case:e OpenEulerComposite2 -->
+<!-- @case:e OpenEulerPlainImage1 -->
+<!-- @case:e OpenEulerPlainImage2 -->
+
+<!-- @case:a AscendPlainText -->
+<!-- @case:a AscendImage -->
+<!-- @case:a AscendComposite1 -->
+<!-- @case:a AscendComposite2 -->
+<!-- @case:a AscendPlainImage1 -->
+<!-- @case:a AscendPlainImage2 -->
 ## API
 
+### CSS 变量
+
+| CSS 变量 | 描述 |
+| --- | --- |
+| \-\-card-bg-color | 背景色 |
+| \-\-card-radius | 圆角 |
+| \-\-card-shadow | 普通状态下的阴影 |
+| \-\-card-shadow-hover | hover状态下的阴影 |
+| \-\-card-shadow-active | 激活状态下的阴影 |
+| \-\-card-cover-radius | 封面圆角 |
+| \-\-card-h-cover-width | 横向封面宽度，在横向布局下有效 |
+| \-\-card-h-cover-max-width | 横向封面最大宽度，在横向布局下有效 |
+| \-\-card-main-padding-v | 内容区域垂直内边距 |
+| \-\-card-main-padding-h | 内容区域水平内边距 |
+| \-\-card-main-padding | 内容区域内边距，由两个变量组成：`--card-main-padding: var(--card-main-padding-v) var(--card-main-padding-h)` |
+| \-\-card-icon-gap | 图标与内容之间的间距：垂直布局时为下外边距，水平布局时为右外边距，水平反向布局时为左外边距 |
+| \-\-card-icon-color | 图标颜色 |
+| \-\-card-icon-size | 图标大小 |
+| \-\-card-header-color | 标题颜色 |
+| \-\-card-header-text-size | 标题字体大小 |
+| \-\-card-header-text-height | 标题字体高度 |
+| \-\-card-title-word-break | 标题 `word-break` 属性值 |
+| \-\-card-content-gap | 标题与内容之间的间距 |
+| \-\-card-content-color | 内容颜色 |
+| \-\-card-content-text-size | 内容字体大小 |
+| \-\-card-content-text-height | 内容字体高度 |
+| \-\-card-detail-word-break | 详情 `word-break` 属性值  |
+| \-\-card-footer-gap | 脚注与内容之间的间距 |
+| \-\-card-footer-color | 脚注颜色 |
+| \-\-card-footer-text-size | 脚注字体大小 |
+| \-\-card-footer-text-height | 脚注字体高度 |
+| \-\-card-cover-padding | 封面内边距 |
+
 <!-- @api OCard -->
-- 
Gitee