4
Sponsor

Background Image Footer

PreviousNext

Nine background-image footer families consolidated into layout and logo-position variants

React EmailMJML ReactJSX Email

Installation

$ pnpm dlx shadcn@latest add @emailcn/footer-with-background-image

Usage

import { FooterWithBackgroundImage } from "@/components/emails/marketing/footers/footer-with-background-image";
<FooterWithBackgroundImage
  {...FooterWithBackgroundImage.PreviewProps}
  variant="top-image-content"
  logoPosition="left"
/>

Examples

Centered Content, Image Bottom

Image Top, Centered Content

Image Top, Logo Bottom

API Reference

PropTypeDefaultDescription
variantFooterWithBackgroundImageVariant"bottom-image-content"Selects the content shell
logoPosition"left" | "right""left"Mirrors supported layouts
themeEmailThemedefault themeEmail theme styling