介绍区 IntroSection

概览

IntroSection 是一个简洁的图文并排组件，适合用于产品介绍、功能说明等场景。支持图片和文字的左右排列切换。

实时预览

为什么选择我们

我们致力于为开发者提供最优质的工具和体验。通过精心设计的组件库，让您专注于业务逻辑，而非重复的 UI 开发。

了解更多

使用方法

import { IntroSection } from '@goenhance/cms-ui';

const Example = () => (
  <IntroSection
    title="产品介绍"
    description="这是我们的核心产品..."
    mediaUrl="/product-screenshot.jpg"
    text="查看详情"
    url="/about"
    reverse={false}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	标题文本
description	string | string[]	-	描述文本（支持数组多段）
mediaUrl	string	-	右侧图片 URL（可选）
alt	string	-	图片替代文本
reverse	boolean	false	是否翻转布局（图片在左）
url	string	-	行动按钮链接
text	string	-	行动按钮文字
target	string	-	链接打开方式

特性

• 自适应布局：无图片时自动单列居中，有图片时双列排列。
• 翻转支持：通过 reverse 属性切换图文位置。
• 发光按钮：内置 GlowingButton 行动按钮。
• 多段描述：description 支持数组形式展示多段文字。

---

主题覆盖

可覆盖变量

类名：mewx-cms-intro-section

变量名	用途	默认值
--mewx-cms-intro-card-bg	卡片背景	var(--blocks-bg-card)
--mewx-cms-intro-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-intro-muted-text	描述文字色	var(--blocks-text-muted)
--mewx-cms-intro-media-shadow	图片阴影	var(--blocks-shadow-md)

覆盖示例

/* 暗色介绍区 */
.dark-intro {
  --mewx-cms-intro-card-bg: 30 41 59;
  --mewx-cms-intro-heading-text: 255 255 255;
  --mewx-cms-intro-muted-text: 148 163 184;
}

<IntroSection className="dark-intro" title="产品介绍" description="..." mediaUrl="..." />