astro
hero
Hero
Introduction
The Hero component is a full-screen display area, typically used for the homepage or top of important pages. It provides an eye-catching visual area that can contain titles, descriptions, images, and call-to-action buttons.
Component features:
- Supports multiple content alignment options (left, center, right)
- Provides rich background styles (solid colors, gradients, background images)
- Supports image display with different positioning options
- Provides multiple overlay effects to improve text readability
- Supports glassmorphism effect, adds semi-transparent background and blur effect to text area
- Supports custom content slots
- Responsive design, adapts to different screen sizes
Examples
Props
align
Content alignment, supports left-aligned, centered, and right-aligned content.
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="左对齐标题"
description="这是左对齐的 Hero 区域，内容靠左显示。"
align="left"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="居中对齐标题"
description="这是居中对齐的 Hero 区域，内容居中显示。"
align="center"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="右对齐标题"
description="这是右对齐的 Hero 区域，内容靠右显示。"
align="right"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
background
Background color type, supports all preset background colors and opacity variants, as well as gradient backgrounds.
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="纯色背景"
description="这个例子使用了纯色背景样式。"
background="plain"
links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="主色背景"
description="使用主色作为背景的 Hero 区域。"
background="primary"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="次要色背景"
description="使用次要色作为背景的 Hero 区域。"
background="secondary"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="强调色背景"
description="使用强调色作为背景的 Hero 区域。"
background="accent"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="成功色背景"
description="使用成功色作为背景的 Hero 区域。"
background="success"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="警告色背景"
description="使用警告色作为背景的 Hero 区域。"
background="warning"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="错误色背景"
description="使用错误色作为背景的 Hero 区域。"
background="error"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="主色透明度背景"
description="使用主色透明度作为背景的 Hero 区域。"
background="primary/20"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="成功色透明度背景"
description="使用成功色透明度作为背景的 Hero 区域。"
background="success/30"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="强调色透明度背景"
description="使用强调色透明度作为背景的 Hero 区域。"
background="accent/50"
links={[{ text: '开始使用', href: '/getting-started' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="渐变色背景"
description="这个例子使用了渐变色背景样式。"
background="gradient"
links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="天空渐变"
description="gradient-sky: 天空蓝紫渐变背景"
background="gradient-sky"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="日落渐变"
description="gradient-sunset: 日落橙红渐变背景"
background="gradient-sunset"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="森林渐变"
description="gradient-forest: 森林绿渐变背景"
background="gradient-forest"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="海洋渐变"
description="gradient-ocean: 海洋蓝绿渐变背景"
background="gradient-ocean"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="山脉渐变"
description="gradient-mountain: 山脉灰蓝渐变背景"
background="gradient-mountain"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="花瓣渐变"
description="gradient-flower: 花瓣粉紫渐变背景"
background="gradient-flower"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="西瓜渐变"
description="gradient-watermelon: 西瓜绿粉红渐变背景"
background="gradient-watermelon"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="柠檬渐变"
description="gradient-lemon: 柠檬黄渐变背景"
background="gradient-lemon"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="葡萄渐变"
description="gradient-grape: 葡萄紫渐变背景"
background="gradient-grape"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="蓝莓渐变"
description="gradient-blueberry: 蓝莓蓝渐变背景"
background="gradient-blueberry"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="芒果渐变"
description="gradient-mango: 芒果黄橙渐变背景"
background="gradient-mango"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="奇异果渐变"
description="gradient-kiwi: 奇异果绿渐变背景"
background="gradient-kiwi"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="火龙果渐变"
description="gradient-pitaya: 火龙果粉绿渐变背景"
background="gradient-pitaya"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="香蕉渐变"
description="gradient-banana: 香蕉黄渐变背景"
background="gradient-banana"
links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>
backgroundImage
Background image URL, adding background images can make the Hero area more attractive.
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="背景图片"
description="使用背景图片增强视觉效果。"
backgroundImage={getLandscapeImage({
width: 800,
height: 400,
provider: 'picsum',
})}
backgroundOverlay="dark"
links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
---
<Hero
title="使用导入背景图片的Hero"
description="这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。"
backgroundImage={heroImage}
backgroundOverlay="dark"
overlayOpacity={0.2}
links={[{ text: '开始使用', href: '#', variant: 'primary' }]}
/>
backgroundOverlay
Overlay on background images, can add different overlay effects to improve text readability.
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="背景图片"
description="使用背景图片增强视觉效果。"
backgroundImage={getLandscapeImage({
width: 800,
height: 400,
provider: 'picsum',
})}
backgroundOverlay="dark"
links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
---
<Hero
title="使用导入背景图片的Hero"
description="这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。"
backgroundImage={heroImage}
backgroundOverlay="dark"
overlayOpacity={0.2}
links={[{ text: '开始使用', href: '#', variant: 'primary' }]}
/>
description
Description text below the title, used to provide more detailed information.
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="欢迎使用我们的产品"
description="这是一个简短的描述，介绍产品的主要特点和价值。"
links={[
{ text: '开始使用', href: '/getting-started', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
glassmorphism
Whether to enable glassmorphism effect, adds semi-transparent background and blur effect to text area for better readability.
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="产品展示"
description="查看我们的最新产品，体验卓越的品质和服务。"
backgroundImage={getLandscapeImage({
width: 1920,
height: 1080,
tag: 'hero-bg',
})}
backgroundOverlay="dark"
glassmorphism={false}
links={[
{ text: '立即购买', href: '/buy', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="产品展示"
description="查看我们的最新产品，体验卓越的品质和服务。"
backgroundImage={getLandscapeImage({
width: 1920,
height: 1080,
tag: 'hero-bg',
})}
glassmorphism={true}
textBackground="glass"
links={[
{ text: '立即购买', href: '/buy', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
image
Optional image configuration, adding images makes the Hero area more vibrant.
---
import { getExampleImage, Hero } 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' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
const image = {
src: heroImage,
alt: "导入的示例图片",
};
---
<Hero
title="使用导入图片的Hero"
description="这是一个使用导入图片资源的Hero组件示例，支持 Astro 的图片优化功能。"
image={image}
links={[{ text: '查看详情', href: '#', variant: 'primary' }]}
/>
imagePosition
Image position, images can be positioned in different locations (right, left, top, bottom).
---
import { getExampleImage, Hero } 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' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
const image = {
src: heroImage,
alt: "导入的示例图片",
};
---
<Hero
title="使用导入图片的Hero"
description="这是一个使用导入图片资源的Hero组件示例，支持 Astro 的图片优化功能。"
image={image}
links={[{ text: '查看详情', href: '#', variant: 'primary' }]}
/>
links
Array of link buttons, used to guide users to take the next action.
带自定义按钮的Hero
这是一个带有自定义按钮的Hero组件示例。
---
import { Button, Hero } 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>
overlayOpacity
Overlay opacity, used to control the transparency of background overlays.
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="背景图片"
description="使用背景图片增强视觉效果。"
backgroundImage={getLandscapeImage({
width: 800,
height: 400,
provider: 'picsum',
})}
backgroundOverlay="dark"
links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>
---
import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
---
<Hero
title="使用导入背景图片的Hero"
description="这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。"
backgroundImage={heroImage}
backgroundOverlay="dark"
overlayOpacity={0.2}
links={[{ text: '开始使用', href: '#', variant: 'primary' }]}
/>
textBackground
Text area background type, when glassmorphism is enabled, you can choose different background styles.
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="产品展示"
description="查看我们的最新产品，体验卓越的品质和服务。"
backgroundImage={getLandscapeImage({
width: 1920,
height: 1080,
tag: 'hero-bg',
})}
glassmorphism={true}
textBackground="none"
links={[
{ text: '立即购买', href: '/buy', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="产品展示"
description="查看我们的最新产品，体验卓越的品质和服务。"
backgroundImage={getLandscapeImage({
width: 1920,
height: 1080,
tag: 'hero-bg',
})}
glassmorphism={true}
textBackground="glass"
links={[
{ text: '立即购买', href: '/buy', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="产品展示"
description="查看我们的最新产品，体验卓越的品质和服务。"
backgroundImage={getLandscapeImage({
width: 1920,
height: 1080,
tag: 'hero-bg',
})}
glassmorphism={true}
textBackground="solid"
links={[
{ text: '立即购买', href: '/buy', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
---
import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---
<Hero
title="产品展示"
description="查看我们的最新产品，体验卓越的品质和服务。"
backgroundImage={getLandscapeImage({
width: 1920,
height: 1080,
tag: 'hero-bg',
})}
glassmorphism={true}
textBackground="gradient"
links={[
{ text: '立即购买', href: '/buy', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
title
Main title of the Hero area, used to attract user attention and convey core information.
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="欢迎使用我们的产品"
description="这是一个简短的描述，介绍产品的主要特点和价值。"
links={[
{ text: '开始使用', href: '/getting-started', variant: 'primary' },
{ text: '了解更多', href: '/about', variant: 'secondary' },
]}
/>
Slots
app
Custom content slot for adding interactive demos, charts, or other custom content to the Hero area.
---
import { Hero } from "@coffic/cosy-ui";
---
<Hero
title="带自定义内容的 Hero"
description="使用 app slot 可以添加自定义内容，如交互式演示、图表等。"
links={[{ text: '查看文档', href: '/docs' }]}>
<div
slot="app"
style="background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<h3 style="margin: 0 0 1rem 0; color: #1f2937; font-size: 1.25rem;">
交互式演示
</h3>
<p style="margin: 0 0 1rem 0; color: #6b7280;">
这是一个自定义的演示区域，可以放置任何内容。
</p>
<button
style="background: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;">
开始演示
</button>
</div>
</Hero>