Hero

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @emailcn/hero
Copy

Usage

Copyimport { Hero } from "@/components/emails/hero";

Copy<Hero {...Hero.PreviewProps} />

Variants

The Hero component supports three visual variants that change the layout and positioning of the content.

Default

The default variant displays content centered with a clean, standard layout. This is ideal for most email designs where you want a balanced, professional look.

Copy<Hero
  variant="default"
  heading="Welcome"
  subheading="Get started with your account"
  ctaLabel="Get Started"
  ctaHref="#"
/>

Slanted Left

The slanted left variant positions content toward the left side of the hero section, creating an asymmetric layout. This variant is useful when you want to create visual interest or have supporting imagery on the right side.

Copy<Hero
  variant="slanted-left"
  heading="Welcome"
  subheading="Get started with your account"
  ctaLabel="Get Started"
  ctaHref="#"
/>

Slanted Right

The slanted right variant positions content toward the right side of the hero section. This variant works well when you want imagery or additional elements on the left side of the hero.

Copy<Hero
  variant="slanted-right"
  heading="Welcome"
  subheading="Get started with your account"
  ctaLabel="Get Started"
  ctaHref="#"
/>

API Reference

Hero