Hero

To display a Hero block, use the <Hero /> component.

The Hero block is a full-width section that typically includes a title, description, and call-to-action buttons. Use it to introduce your website or application to users.

Preview

Lorem ipsum dolor sit amet

Welcome to AstroLite

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam quis nostrud exercitation.

Get Started Learn More

Import

src/components/example.astro

import { Hero } from 'astro-lite';

Usage

src/components/example.astro

<Hero
    upperLink='https://example.com/'
    upperText='Lorem ipsum dolor sit amet'
    title='Welcome to AstroLite'
    description='Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam quis nostrud exercitation.'
    primaryLink='https://example.com/'
    primaryText='Get Started'
    secondaryLink='https://example.com/'
    secondaryText='Learn More'
/>

<Hero> Props

• upperLink (optional)
• upperText (optional)
• title (required)
• description (required)
• primaryLink (optional)
• primaryText (optional)
• secondaryLink (optional)
• secondaryText (optional)