利益点高亮 Benefit

概览

BenefitHighlight 通过大字号的标题和简洁的描述，在页面中创造视觉焦点，特别适合作为转折点或核心总结。

实时预览

为开发者而生，为业务而优

我们相信工具应当让创造变得更简单。Mewx CMS UI 不仅仅是一个组件库，更是一套成熟的交付哲学。

使用方法

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

const Example = () => (
  <BenefitHighlight
    title="核心价值"
    description="这是我们最想传达给用户的关键信息。"
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	高亮区域的标题
description	string	-	标题下的描述文字

特性

• 大视觉张力：使用加粗大字号，确保信息在滚动过程中一目了然。
• 呼吸空间：自带充足的上下外边距，在长页面中作为“呼吸区”。
• 极致简约：摒弃多余装饰，让文字本身的力量得以体现。

---

主题覆盖

可覆盖变量

类名：mewx-cms-benefit-highlight

变量名	用途	默认值
--mewx-cms-benefit-bg	背景色	var(--blocks-bg-page)
--mewx-cms-benefit-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-benefit-muted-text	描述文字色	var(--blocks-text-muted)

覆盖示例

/* 品牌色背景 */
.brand-benefit {
  --mewx-cms-benefit-bg: 239 246 255;
  --mewx-cms-benefit-heading-text: 37 99 235;
}

<BenefitHighlight className="brand-benefit" title="核心价值" description="描述内容" />