Hero

Basic Usage

The simplest Hero area display, containing title, description, and call-to-action button

欢迎使用我们的产品

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

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

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

Alignment

The Hero component supports left-aligned, centered, and right-aligned content

居中对齐标题

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

主要操作次要操作

左对齐标题

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

主要操作次要操作

右对齐标题

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

主要操作次要操作

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

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

居中对齐标题

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

主要操作次要操作

左对齐标题

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

主要操作次要操作

右对齐标题

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

主要操作次要操作

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

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

居中对齐标题

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

主要操作次要操作

左对齐标题

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

主要操作次要操作

右对齐标题

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

主要操作次要操作

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

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

Usage with Images

Make the Hero area more vibrant by adding images. Images can be positioned in different locations.

带图片的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: '#' }]}
/>

Background Styles

The Hero component supports different background styles, including solid colors and gradients.

纯色背景

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

了解更多

渐变色背景

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

了解更多

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

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

纯色背景

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

了解更多

渐变色背景

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

了解更多

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

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

Background Images

Adding background images can make the Hero area more attractive. Different overlay effects can also be added.

背景图片

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

了解更多

              ---
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' }]}
/>

Usage with Custom Content

Add custom content through slots to achieve richer display effects

带自定义按钮的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>