4
Sponsor

2-Column Menu and Divider

PreviousNext

two-column menu footer with divider and mirrored logo variants

React EmailMJML ReactJSX Email
import { FooterWith2ColumnMenuAndDivider } from "@/components/email/footer-with-2-column-menu-and-divider";
import type { FooterWith2ColumnMenuAndDividerVariant } from "@/components/email/footer-with-2-column-menu-and-divider";

export function FooterWith2ColumnMenuAndDividerDemo({
  variant = "left-logo",
}: {
  variant?: FooterWith2ColumnMenuAndDividerVariant;
}) {
  return (
    <FooterWith2ColumnMenuAndDivider
      {...FooterWith2ColumnMenuAndDivider.PreviewProps}
      variant={variant}
    />
  );
}

Installation

$ pnpm dlx shadcn@latest add @emailcn/footer-with-2-column-menu-and-divider

Usage

import { FooterWith2ColumnMenuAndDivider } from "@/components/email/footer-with-2-column-menu-and-divider";
<FooterWith2ColumnMenuAndDivider
  {...FooterWith2ColumnMenuAndDivider.PreviewProps}
  variant="left-logo"
/>

Examples

import { FooterWith2ColumnMenuAndDivider } from "@/components/email/footer-with-2-column-menu-and-divider";
import type { FooterWith2ColumnMenuAndDividerVariant } from "@/components/email/footer-with-2-column-menu-and-divider";

export function FooterWith2ColumnMenuAndDividerDemo({
  variant = "left-logo",
}: {
  variant?: FooterWith2ColumnMenuAndDividerVariant;
}) {
  return (
    <FooterWith2ColumnMenuAndDivider
      {...FooterWith2ColumnMenuAndDivider.PreviewProps}
      variant={variant}
    />
  );
}

API Reference

PropTypeDefaultDescription
variant"left-logo" | "right-logo""left-logo"Selects the logo position
themeEmailThemedefault themeEmail theme styling