Hero Section

A full-width hero banner with a dark overlay background, large headline, descriptive subtitle, and primary/secondary call-to-action buttons.

Preview

LIVE IT. NOW.

Discover the spirit and freedom of backpacking across incredible destinations

Usage

tsx

import { HeroSection } from "zostel-ui";

<HeroSection
  headline="Explore India"
  subtitle="Find your next adventure at hostels across the most beautiful destinations."
  backgroundImage="/images/hero-bg.jpg"
  primaryAction={{ label: "Browse Hostels", href: "/hostels" }}
  secondaryAction={{ label: "View Trips", href: "/trips" }}
/>

Props

Prop	Type	Default	Description
`headline`	`string`	—	Main heading text
`subtitle`	`string`	—	Descriptive text below the headline
`backgroundImage`	`string`	—	URL for the hero background image
`primaryAction`	`{ label: string; href: string }`	—	Primary CTA button configuration
`secondaryAction`	`{ label: string; href: string }`	—	Optional secondary CTA button
`overlay`	`boolean`	true	Enable dark gradient overlay on the background
`minHeight`	`string`	"400px"	Minimum height of the hero section
`className`	`string`	—	Additional CSS classes

headline

Type: string

Default: —

Main heading text

subtitle

Type: string

Default: —

Descriptive text below the headline

backgroundImage

Type: string

Default: —

URL for the hero background image

primaryAction

Type: { label: string; href: string }

Default: —

Primary CTA button configuration

secondaryAction

Type: { label: string; href: string }

Default: —

Optional secondary CTA button

overlay

Type: boolean

Default: true

Enable dark gradient overlay on the background

minHeight

Type: string

Default: "400px"

Minimum height of the hero section

className

Type: string

Default: —

Additional CSS classes

Previous Gallery Next Navigation Header