import { HeaderWithLogoAndBadge } from "@/components/email/header-with-logo-and-badge";
import { defaultTheme } from "@/components/email/theme-default";
export function HeaderWithLogoAndBadgeDemo() {
return <HeaderWithLogoAndBadge alignment="left" theme={defaultTheme} />;
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/header-with-logo-and-badge
Usage
import { HeaderWithLogoAndBadge } from "@/components/email/header-with-logo-and-badge";<HeaderWithLogoAndBadge alignment="left" />Examples
Centered
import { HeaderWithLogoAndBadge } from "@/components/email/header-with-logo-and-badge";
export function HeaderWithLogoAndBadgeCenteredDemo() {
return <HeaderWithLogoAndBadge alignment="center" />;
}Right logo
import { HeaderWithLogoAndBadge } from "@/components/email/header-with-logo-and-badge";
export function HeaderWithLogoAndBadgeAlignmentRightExampleDemo() {
return <HeaderWithLogoAndBadge alignment="right" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
logoSrc | string | "https://placehold.co/320x96/0F766E/FFFFFF.png?text=Maizzle%20Insignia" | Configures the component's logosrc. |
logoAlt | string | "Maizzle" | Configures the component's logoalt. |
logoHref | string | "https://example.com" | Configures the component's logohref. |
badgeLabel | string | "FREE SHIPPING" | Configures the component's badgelabel. |
message | string | "On orders over $65" | Configures the component's message. |
alignment | "left" | "center" | "right" | "left" | Configures the component's alignment. |
pageBackgroundColor | string | "#f1f5f9" | Configures the component's pagebackgroundcolor. |
backgroundColor | string | "#fffffe" | Configures the component's backgroundcolor. |
badgeBackgroundColor | string | "#eff6ff" | Configures the component's badgebackgroundcolor. |
badgeBorderColor | string | "#dbeafe" | Configures the component's badgebordercolor. |
badgeColor | string | "#2563eb" | Configures the component's badgecolor. |
badgeTextColor | string | "#4b5563" | Configures the component's badgetextcolor. |