行动呼吁 CTA

概览

CTA 是一个功能丰富的行动呼吁组件，支持徽章标识、渐变高亮标题、描述文本和多个操作按钮，适合放在页面中段引导用户转化。

实时预览

全新发布

准备好提升你的
内容创作效率了吗？

通过我们专业的 CMS 组件库，只需几分钟即可搭建出令人惊艳的着陆页。

免费试用查看文档

使用方法

import { CTA } from '@goenhance/cms-ui';
import { Sparkles } from 'lucide-react';

const Example = () => (
  <CTA
    badge={{ icon: Sparkles, text: "新功能" }} // icon 仅在代码中传入，预览中省略
    title={{
      main: "开始你的",
      highlight: "数字化转型之旅"
    }}
    description="简单几步即可完成部署。"
    buttons={[
      { text: "立即开始", href: "/start", variant: "hero", size: "hero" }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
badge	{ icon?: LucideIcon, text: string }	-	顶部徽章（可选图标和文字）
title	{ main: string, highlight: string }	-	标题，main 为普通色，highlight 为渐变色
description	string	-	描述文本
buttons	CTAButton[]	[]	操作按钮列表
backgroundElements	BackgroundElement[]	[]	背景装饰元素（浮动光球）
sectionId	string	"cta"	section 元素的 id
backgroundClass	string	背景渐变类	自定义背景 CSS 类

CTAButton

属性	类型	默认值	说明
text	string	-	按钮文字
href	string	-	按钮链接（不传则为普通按钮）
variant	string	"hero"	按钮变体
size	string	"hero"	按钮尺寸
className	string	-	自定义类名

BackgroundElement

属性	类型	说明
size	string	尺寸类（如 w-64 h-64）
position	string	位置类（如 top-20 left-10）
color	string	颜色类
blur	string	模糊类
animationDelay	string	动画延迟

特性

• 渐变标题：高亮文字自动应用品牌渐变色。
• 浮动光球：支持自定义背景装饰动画元素。
• 多按钮：支持主次按钮组合，引导不同转化路径。
• 可选徽章：顶部徽章可搭配 Lucide 图标。

---

主题覆盖

可覆盖变量

类名：mewx-cms-cta

变量名	用途	默认值
--mewx-cms-cta-bg	背景渐变	var(--blocks-gradient-hero)
--mewx-cms-cta-badge-bg	徽章背景	var(--blocks-primary-lightest)
--mewx-cms-cta-badge-border	徽章边框	var(--blocks-primary-lighter)
--mewx-cms-cta-badge-text	徽章文字色	var(--blocks-primary)
--mewx-cms-cta-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-cta-body-text	描述文字色	var(--blocks-text-body)
--mewx-cms-cta-gradient-text	渐变标题色	var(--blocks-gradient-text)

覆盖示例

/* 蓝色 CTA */
.blue-cta {
  --mewx-cms-cta-badge-bg: 239 246 255;
  --mewx-cms-cta-badge-border: 191 219 254;
  --mewx-cms-cta-badge-text: 37 99 235;
  --mewx-cms-cta-gradient-text: linear-gradient(135deg, rgb(37, 99, 235), rgb(59, 130, 246));
}

<CTA className="blue-cta" title={{ main: "开始", highlight: "数字化转型" }} description="..." buttons={[...]} />