import { CardCoupons } from "@/components/email/card-coupons";
import { defaultTheme } from "@/components/email/theme-default";
export function CardCouponsDemo() {
return <CardCoupons variant="with-name" theme={defaultTheme} />;
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/card-coupons
Usage
import { CardCoupons } from "@/components/email/card-coupons";<CardCoupons variant="with-name" />Examples
Pattern
import { CardCoupons } from "@/components/email/card-coupons";
export function CardCouponsPatternDemo() {
return <CardCoupons variant="with-pattern" />;
}Background image
import { CardCoupons } from "@/components/email/card-coupons";
export function CardCouponsBackgroundImageDemo() {
return <CardCoupons variant="with-background-image" />;
}Overlay
import { CardCoupons } from "@/components/email/card-coupons";
export function CardCouponsOverlayDemo() {
return <CardCoupons variant="with-overlay" />;
}Background image header
import { CardCoupons } from "@/components/email/card-coupons";
export function CardCouponsBackgroundImageHeaderDemo() {
return <CardCoupons variant="background-image-header" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | - | Configures the component's heading. |
recipient | string | "Jenna Adams" | Configures the component's recipient. |
code | string | "WINTER20OFF" | Configures the component's code. |
description | string | "Use code: WINTER20OFF at checkout, or click the link below to automatically apply the discount to your order." | Configures the component's description. |
logoSrc | string | - | Configures the component's logosrc. |
logoAlt | string | "Maizzle" | Configures the component's logoalt. |
backgroundImageSrc | string | - | Configures the component's backgroundimagesrc. |
buttonLabel | string | "Shop now" | Configures the component's buttonlabel. |
buttonHref | string | "https://example.com" | Configures the component's buttonhref. |
arrowIconSrc | string | "https://placehold.co/64x64/C2410C/FFFFFF.png?text=Arrow%20Right" | Configures the component's arrowiconsrc. |
pageBackgroundColor | string | "#f1f5f9" | Configures the component's pagebackgroundcolor. |
backgroundColor | string | "#fffffe" | Configures the component's backgroundcolor. |
cardBackgroundColor | string | "#1f2937" | Configures the component's cardbackgroundcolor. |
codeBackgroundColor | string | "#f3f4f6" | Configures the component's codebackgroundcolor. |
headingColor | string | "#fffffe" | Configures the component's headingcolor. |
textColor | string | "#4b5563" | Configures the component's textcolor. |
mutedTextColor | string | "#9ca3af" | Configures the component's mutedtextcolor. |
buttonBackgroundColor | string | "#4f46e5" | Configures the component's buttonbackgroundcolor. |
buttonColor | string | "#fffffe" | Configures the component's buttoncolor. |
variant | "with-name" | "with-pattern" | "with-overlay" | "with-background-image" | "background-image-header" | "with-overlay" | Configures the component's variant. |