diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
index b6c01d2011fb6c9b83aa597e89b9967e9f2bcfea..3f2bd16b8e845a7296264152baaf8b870e727ffa 100644
--- a/packages/docs/vite.config.ts
+++ b/packages/docs/vite.config.ts
@@ -35,6 +35,8 @@ export default defineConfig({
     },
   },
   server: {
+    host: '0.0.0.0',
+    allowedHosts: true,
     port: 3300,
   },
   define: {
diff --git a/packages/opendesign/src/card/OCard.vue b/packages/opendesign/src/card/OCard.vue
index bbfcf4ff27cbb1f47f2962f28e95e4995f77c669..8dfcfd765d56c94e3513a858c6200319a8ececb6 100644
--- a/packages/opendesign/src/card/OCard.vue
+++ b/packages/opendesign/src/card/OCard.vue
@@ -29,6 +29,10 @@ const isTitleLimited = computed(() => {
 const isDetailLimited = computed(() => {
   return !isUndefined(props.detailMaxRow);
 });
+
+const hasTitleIcon = computed(() => {
+  return props.titleIcon;
+});
 </script>
 
 <template>
@@ -75,8 +79,18 @@ const isDetailLimited = computed(() => {
           <div class="o-card-main-wrap">
             <div>
               <!-- header -->
-              <div v-if="props.title || !!slots.header || !!slots.title" class="o-card-header">
+              <div
+                v-if="props.title || !!slots.header || !!slots.title"
+                :class="{
+                  'o-card-header': true,
+                  'o-card-header-with-icon': hasTitleIcon
+                }"
+              >
                 <slot name="header">
+                  <div v-if="hasTitleIcon" class="o-card-title-icon">
+                    <OFigure v-if="isString(props.titleIcon)" :src="props.titleIcon" class="o-card-title-icon-figure"/>
+                    <component :is="props.titleIcon" v-else />
+                  </div>
                   <div
                     v-if="props.title"
                     class="o-card-title"
diff --git a/packages/opendesign/src/card/__demo__/CardIcon.vue b/packages/opendesign/src/card/__demo__/CardIcon.vue
index 4590ab4c316168b403d8421107e3e0165d64f89d..a85ecc33395051950dca526b32b005c35b378fc8 100644
--- a/packages/opendesign/src/card/__demo__/CardIcon.vue
+++ b/packages/opendesign/src/card/__demo__/CardIcon.vue
@@ -2,7 +2,7 @@
 import { OCard } from '../index';
 import '../../button/style';
 import { OButton } from '../../button';
-import { OIconStar } from '../../icon-components';
+import { OIconStar, OIconSkill } from '../../icon-components';
 
 const cardInfo = {
   cover: 'https://www.openeuler.org/img/banners/20230418-odd.png',
@@ -28,6 +28,12 @@ const cardInfo = {
       </OCard>
     </div>
   </section>
+  <section>
+    <div class="display-item">
+      <h4>单体卡片（响应式, titleIcon属性）</h4>
+      <OCard hoverable :title="cardInfo.title" :detail="cardInfo.detail" :title-icon="OIconSkill" />
+    </div>
+  </section>
 </template>
 <style lang="scss" scoped>
 section {
diff --git a/packages/opendesign/src/card/style/media.scss b/packages/opendesign/src/card/style/media.scss
index 3d1a3e0a1bf6b14c141dc8dfd23d0dd364fe761b..a84ba875c3ede9eaddf90bf13d52ce56deb9dfbe 100644
--- a/packages/opendesign/src/card/style/media.scss
+++ b/packages/opendesign/src/card/style/media.scss
@@ -13,6 +13,8 @@
 
       --card-icon-gap: 12px;
 
+      --card-title-icon-gap: var(--o-gap-2);
+
       --card-content-gap: 8px;
       --card-content-text-size: var(--o-font_size-tip1);
       --card-content-text-height: var(--o-line_height-tip1);
@@ -39,6 +41,9 @@
       --card-icon-gap: 8px;
       --card-icon-size: var(--o-icon_size_control-l);
 
+      --card-title-icon-gap: var(--o-gap-2);
+      --card-title-icon-size: var(--o-icon_size-m);
+
       --card-content-gap: 8px;
       --card-content-text-size: var(--o-font_size-tip1);
       --card-content-text-height: var(--o-line_height-tip1);
@@ -77,6 +82,9 @@
       --card-icon-gap: 8px;
       --card-icon-size: var(--o-icon_size_control-l);
 
+      --card-title-icon-gap: var(--o-gap-2);
+      --card-title-icon-size: var(--o-icon_size-m);
+
       --card-content-gap: 8px;
       --card-content-text-size: var(--o-font_size-tip2);
       --card-content-text-height: var(--o-line_height-tip2);
diff --git a/packages/opendesign/src/card/style/style.scss b/packages/opendesign/src/card/style/style.scss
index 6ca74f7bcade1c209f3ac024bee8f464770905e6..9f5f86d445cce374f857482c77cbd4f7244df312 100644
--- a/packages/opendesign/src/card/style/style.scss
+++ b/packages/opendesign/src/card/style/style.scss
@@ -41,6 +41,26 @@
   color: var(--card-header-color);
 }
 
+.o-card-header-with-icon {
+  position: relative;
+
+  .o-card-title {
+    text-indent: calc(var(--card-title-icon-size) + var(--card-title-icon-gap));
+  }
+}
+
+.o-card-title-icon {
+  width: var(--card-title-icon-size);
+  height: var(--card-title-icon-size);
+  position: absolute;
+  top: calc((var(--card-header-text-height) - var(--card-title-icon-size)) / 2);
+  font-size: var(--card-title-icon-size);
+}
+
+.o-card-title-icon-figure {
+  width: 100%;
+}
+
 .o-card-title {
   height: calc(var(--card-title-row) * var(--card-header-text-height));
   margin: 0;
diff --git a/packages/opendesign/src/card/style/var.scss b/packages/opendesign/src/card/style/var.scss
index 16b6f5cfef7295002e1865739af13a1f21ab396c..46d475227c400b9fe8a547af8c1bf9dc34d83ce1 100644
--- a/packages/opendesign/src/card/style/var.scss
+++ b/packages/opendesign/src/card/style/var.scss
@@ -17,6 +17,10 @@
   --card-icon-color: var(--o-color-info1);
   --card-icon-size: var(--o-icon_size_control-xl);
 
+  --card-title-icon-gap: var(--o-gap-3);
+  --card-title-icon-color: var(--o-color-info1);
+  --card-title-icon-size: var(--o-icon_size-l);
+
   --card-header-color: var(--o-color-info1);
   --card-header-text-size: var(--o-font_size-h3);
   --card-header-text-height: var(--o-line_height-h3);
diff --git a/packages/opendesign/src/card/types.ts b/packages/opendesign/src/card/types.ts
index b5b885b18f5020ba80bf7a07f9bb7435bc07c086..e4dca28a79fb77da7d008f186676b7b08382ae4d 100644
--- a/packages/opendesign/src/card/types.ts
+++ b/packages/opendesign/src/card/types.ts
@@ -49,6 +49,13 @@ export const cardProps = {
   icon: {
     type: [String, Object] as PropType<string | Component>,
   },
+  /**
+   * @zh-CN title开头的行内图标
+   * @en-US Title prefix icon
+   */
+  titleIcon: {
+    type: [String, Object] as PropType<string | Component>,
+  },
   /**
    * @zh-CN 标题
    * @en-US Title
diff --git a/packages/portal-ak/src/ak/theme/card.k.scss b/packages/portal-ak/src/ak/theme/card.k.scss
index 48fe33f54917f7e9ac88ab0149857b0959d04868..4d06373aab859b5c676fd6634933fc5049cd83b5 100644
--- a/packages/portal-ak/src/ak/theme/card.k.scss
+++ b/packages/portal-ak/src/ak/theme/card.k.scss
@@ -42,7 +42,7 @@
       transition: color var(--o-duration-s) var(--o-easing-standard);
     }
     @include hover {
-      .o-card-icon {
+      .o-card-icon, .o-card-title-icon {
         color: rgb(var(--o-red-huawei));
       }
     }