logo
导航

Hero

基础用法

最简单的Hero区域展示,包含标题、描述和行动按钮

欢迎使用我们的产品

这是一个简短的描述,介绍产品的主要特点和价值。

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="欢迎使用我们的产品"
  description="这是一个简短的描述,介绍产品的主要特点和价值。"
  links={[
    { text: '开始使用', href: '/getting-started', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

对齐方式

Hero组件支持内容的左对齐、居中和右对齐

居中对齐标题

这是一个居中对齐的Hero组件示例。

左对齐标题

这是一个左对齐的Hero组件示例。

右对齐标题

这是一个右对齐的Hero组件示例。

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="居中对齐标题"
  description="这是一个居中对齐的Hero组件示例。"
  align="center"
  links={[
    { text: '主要操作', href: '#', variant: 'primary' },
    { text: '次要操作', href: '#', variant: 'secondary' },
  ]}
/>

居中对齐标题

这是一个居中对齐的Hero组件示例。

左对齐标题

这是一个左对齐的Hero组件示例。

右对齐标题

这是一个右对齐的Hero组件示例。

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="左对齐标题"
  description="这是一个左对齐的Hero组件示例。"
  align="left"
  links={[
    { text: '主要操作', href: '#', variant: 'primary' },
    { text: '次要操作', href: '#', variant: 'secondary' },
  ]}
/>

居中对齐标题

这是一个居中对齐的Hero组件示例。

左对齐标题

这是一个左对齐的Hero组件示例。

右对齐标题

这是一个右对齐的Hero组件示例。

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="右对齐标题"
  description="这是一个右对齐的Hero组件示例。"
  align="right"
  links={[
    { text: '主要操作', href: '#', variant: 'primary' },
    { text: '次要操作', href: '#', variant: 'secondary' },
  ]}
/>

带图片的用法

通过添加图片,使Hero区域更加生动。图片可以设置在不同位置。

示例图片

带图片的Hero

这是一个带有图片的Hero组件示例。

---
import { Hero } from '@coffic/cosy-ui';
import { getExampleImage } from '@coffic/cosy-ui';

const image = {
  src: getExampleImage({ width: 400, height: 300, provider: 'picsum' }),
  alt: '示例图片',
};
---

<Hero
  title="带图片的Hero"
  description="这是一个带有图片的Hero组件示例。"
  image={image}
  links={[{ text: '查看详情', href: '#', variant: 'primary' }]}
/>

背景样式

Hero组件支持多种背景样式,包括纯色和丰富的渐变色。

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="纯色背景"
  description="这个例子使用了纯色背景样式。"
  background="plain"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="渐变色背景"
  description="这个例子使用了渐变色背景样式。"
  background="gradient"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="天空渐变"
  description="gradient-sky: 天空蓝紫渐变背景"
  background="gradient-sky"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="日落渐变"
  description="gradient-sunset: 日落橙红渐变背景"
  background="gradient-sunset"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="森林渐变"
  description="gradient-forest: 森林绿渐变背景"
  background="gradient-forest"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="海洋渐变"
  description="gradient-ocean: 海洋蓝绿渐变背景"
  background="gradient-ocean"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="山脉渐变"
  description="gradient-mountain: 山脉灰蓝渐变背景"
  background="gradient-mountain"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="花瓣渐变"
  description="gradient-flower: 花瓣粉紫渐变背景"
  background="gradient-flower"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="西瓜渐变"
  description="gradient-watermelon: 西瓜绿粉红渐变背景"
  background="gradient-watermelon"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="柠檬渐变"
  description="gradient-lemon: 柠檬黄渐变背景"
  background="gradient-lemon"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="葡萄渐变"
  description="gradient-grape: 葡萄紫渐变背景"
  background="gradient-grape"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="蓝莓渐变"
  description="gradient-blueberry: 蓝莓蓝渐变背景"
  background="gradient-blueberry"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="芒果渐变"
  description="gradient-mango: 芒果黄橙渐变背景"
  background="gradient-mango"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="奇异果渐变"
  description="gradient-kiwi: 奇异果绿渐变背景"
  background="gradient-kiwi"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="火龙果渐变"
  description="gradient-pitaya: 火龙果粉绿渐变背景"
  background="gradient-pitaya"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

纯色背景

这个例子使用了纯色背景样式。

渐变色背景

这个例子使用了渐变色背景样式。

天空渐变

gradient-sky: 天空蓝紫渐变背景

日落渐变

gradient-sunset: 日落橙红渐变背景

森林渐变

gradient-forest: 森林绿渐变背景

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

葡萄渐变

gradient-grape: 葡萄紫渐变背景

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

芒果渐变

gradient-mango: 芒果黄橙渐变背景

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

香蕉渐变

gradient-banana: 香蕉黄渐变背景

---
import { Hero } from '@coffic/cosy-ui';
---

<Hero
  title="香蕉渐变"
  description="gradient-banana: 香蕉黄渐变背景"
  background="gradient-banana"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

背景图片

添加背景图片可以使Hero区域更加吸引人。还可以添加不同的遮罩效果。

背景图片

使用背景图片增强视觉效果。

---
import { Hero } from '@coffic/cosy-ui';
import { getLandscapeImage } from '@coffic/cosy-ui';
---

<Hero
  title="背景图片"
  description="使用背景图片增强视觉效果。"
  backgroundImage={getLandscapeImage({
    width: 800,
    height: 400,
    provider: 'picsum',
  })}
  backgroundOverlay="dark"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

带自定义内容的用法

通过插槽添加自定义内容,实现更丰富的展示效果

带自定义按钮的Hero

这是一个带有自定义按钮的Hero组件示例。

---
import { Hero } from '@coffic/cosy-ui';
import { Button } from '@coffic/cosy-ui';
---

<Hero
  title="带自定义按钮的Hero"
  description="这是一个带有自定义按钮的Hero组件示例。"
  links={[]}>
  <div slot="app" class="cosy:flex cosy:gap-4">
    <Button variant="primary">主要操作</Button>
    <Button variant="secondary">次要操作</Button>
  </div>
</Hero>