Marketing
- Content
- Footer with Legal Text
- Company Locations Footer
- App Store Buttons Footer
- Background Image Footer
- Overlapped CTA Footer
- Large Title and Buttons Footer
- Full Menu Footer
- Centered with Menu and Socials
- 2-Column Menu
- 2-Column Menu and Divider
- Menu and Full-Width CTA
- 3-Column Menu
- Content and CTA
- Social Icons and Address
- Text, Menu and Socials
- Simple Footer with Social Icons
Ecommerce
import { FooterWithCompanyLocations } from "@/components/email/footer-with-company-locations";
import type { FooterWithCompanyLocationsVariant } from "@/components/email/footer-with-company-locations";
export function FooterWithCompanyLocationsDemo({
variant = "stacked",
}: {
variant?: FooterWithCompanyLocationsVariant;
}) {
return (
<FooterWithCompanyLocations
{...FooterWithCompanyLocations.PreviewProps}
variant={variant}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/footer-with-company-locations
Usage
import { FooterWithCompanyLocations } from "@/components/email/footer-with-company-locations";<FooterWithCompanyLocations
{...FooterWithCompanyLocations.PreviewProps}
variant="stacked"
/>Examples
Grid
import { FooterWithCompanyLocations } from "@/components/email/footer-with-company-locations";
import type { FooterWithCompanyLocationsVariant } from "@/components/email/footer-with-company-locations";
export function FooterWithCompanyLocationsDemo({
variant = "stacked",
}: {
variant?: FooterWithCompanyLocationsVariant;
}) {
return (
<FooterWithCompanyLocations
{...FooterWithCompanyLocations.PreviewProps}
variant={variant}
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "stacked" | "grid" | "stacked" | Selects the layout |
locations | CompanyLocation[] | variant data | Overrides the location content |
theme | EmailTheme | default theme | Email theme styling |