媒体封面 MediaHero

概览

MediaHero 通常位于页面最顶部，结合大字号标题和高质量媒体展示，确立页面的品牌基调。

实时预览

构建业务的未来

通过我们的一站式 CMS 解决方案，让内容创作变得前所未有的简单。全球 500 强公司的共同 choice。

开启免费试用

使用方法

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

const Example = () => (
  <MediaHero
    title="让创意触手可及"
    description="..."
    mediaUrl="/hero-video.mp4"
    text="立即开始"
    url="/start"
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	巨幕标题
description	string	-	详细描述文案
mediaUrl	string	-	右侧媒体 URL (图片或视频)
text	string	-	按钮文字
url	string	-	按钮链接
poster	string	-	视频封面图 URL

特性

• 渐变文本：标题自动应用从品牌色到中性色的渐变，增加高级感。
• 发光背景：媒体背后带有柔和的 blocks-glow 呼吸灯效果。
• 自适应栅格：在宽屏下使用 2:3 的黄金比例布局，在窄屏下自动堆叠。