Hero

Installation

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

Usage

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

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

Variants

The Hero component supports three variants that control the layout and visual style of the content.

Default

Standard hero section with centered content. This is the default variant that displays the heading, subheading, and CTA button in a balanced, centered layout.

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

Slanted Left

Hero section with content slanted to the left. This variant positions the content on the left side of the container with a slanted visual effect, creating a dynamic and modern look.

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

Slanted Right

Hero section with content slanted to the right. This variant positions the content on the right side of the container with a slanted visual effect, offering an alternative dynamic layout option.

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

API Reference

Hero