← All templates

浮动标签封面 <FloatHero />

居中的安静大标题和导语,下面一张带声波的小卡片,四周漂着 4–6 个略微倾斜的图标标签。

Template and style descriptions are currently available in Chinese only.

Group
开场 · 产品或功能第 1 页
Component
FloatHero · #float-hero

Good for

  • AI、语音、工具类产品的开场
  • 有 4–6 个能用一个词说清的功能

Avoid when

  • 正式汇报:用 Cover
  • 功能需要解释:用 IconGrid

Content limits

1title ≤ 2 行 × 12 字,lead ≤ 48 字
2chips 4–6 个,label ≤ 10 字符
3card.label ≤ 12 字符,card.text ≤ 22 字

Fields

FieldType
chips · required{ icon, label }[]漂浮标签
card · required{ label, text }声波小卡片

Example

<FloatHero kicker="第 4 期 · 浮窗风格" title={['讲的时候,', '只管往下讲']} lead="…" chips={[{ icon: 'monitor', label: '全屏 F' }, …]} card={{ label: 'AUTOPLAY', text: '每 8 秒前进一步' }} />