跳到內容
調色盤星雲光譜
選擇版面配色

即時套用,保留目前的亮暗模式。

Banner (am-banner)

BannerHero 的 marketing 命名入口,沿用相同的 Section + Container + copy + actions + media contract,讓 consumer 能用更貼近頁面語意的名稱組成 banner。

  • 支援 eyebrowtitledescriptionalignsurface
  • 支援 primaryActionsecondaryAction
  • media slot 可放圖片、mockup 或 campaign preview
  • 不新增第二套 hero CSS 或 runtime 行為
<Banner
eyebrow="Spring release"
title="Give the campaign one clear next step."
description="A focused promise with supporting visual proof."
primaryAction={{ label: "Get started", href: "/start" }}
>
<Fragment slot="media">
<img src="/campaign-preview.webp" alt="Campaign preview" />
</Fragment>
</Banner>

詳見 Heroplayground /playground/marketing/