Hero

The Hero component provides you with landing page hero sections and banners.

Import

import { Hero } from '@nostromo/ui-marketing'
// or
import { Hero } from '@nostromo/ui-marketing/hero'

Usage

import { Hero } from '@nostromo/ui-marketing'
import { Button } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <Hero
      title="Welcome to Nostromo UI"
      subtitle="A comprehensive UI library"
      cta={<Button>Get Started</Button>}
    />
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Hero } from '@nostromo/ui-marketing' import { Button } from '@nostromo/ui-core' export default function HeroExample() { return ( <Hero title="Welcome to Nostromo UI" subtitle="A comprehensive UI library built with React, TypeScript and Tailwind CSS" cta={ <div className="flex gap-4">...

Live Example

☀️

Copy

Storybook →

View Code

import { Hero } from '@nostromo/ui-marketing' import { Button } from '@nostromo/ui-core' export default function HeroVariants() { return ( <div className="space-y-8"> <Hero title="Default Hero" subtitle="Standard hero section with center alignment" size="md"...

Code Examples

Props

Prop	Type	Default	Required	Description
`title`	`string`	-	Yes	Hero title text
`subtitle`	`string`	`undefined`	No	Hero subtitle text
`cta`	`React.ReactNode`	`undefined`	No	Call-to-action content (buttons, links, etc.)
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	No	Size of the hero section
`variant`	`"default" \| "muted" \| "accent"`	`"default"`	No	Visual variant
`contentAlign`	`"left" \| "center" \| "right"`	`"center"`	No	Content alignment
`titleSize`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`undefined`	No	Size of the title text
`subtitleSize`	`"sm" \| "md" \| "lg"`	`undefined`	No	Size of the subtitle text
`backgroundImage`	`string`	`undefined`	No	Background image URL
`overlay`	`boolean`	`false`	No	Whether to add overlay effect over background image
`className`	`string`	`undefined`	No	Additional CSS classes

ErrorBoundary Features