Free React Email Gift Guide Template

import * as React from 'react';

import {
  Band,
  Brand,
  Centered,
  Columns,
  Display,
  EmailImage,
  EmailLayout,
  Eyebrow,
  FinePrint,
  FullBleed,
  OutlineButton,
  Plate,
  Price,
  ProductCardProps,
  ProductGrid,
  Prose,
  Rule,
  SectionTitle,
  Spacer,
} from './components';

export interface GiftGuideEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  hero?: EmailImage;
  eyebrow?: string;
  headline?: React.ReactNode;
  intro?: string;
  /** The affordable half of the guide. */
  picks?: {
    eyebrow: string;
    products: ProductCardProps[];
  };
  /** The expensive one, given a band of its own. */
  feature?: {
    eyebrow: string;
    title: string;
    body: string;
    price: string;
    image: EmailImage;
    cta: { label: string; href: string };
  };
  /** For the undecided. */
  giftCard?: {
    eyebrow: string;
    title: string;
    body: string;
    cta: { label: string; href: string };
  };
  /** Shipping deadlines. */
  terms?: string;
}

/**
 * Gift guide — a seasonal edit: four things under a price ceiling, one big
 * gift, and a gift card for the people still deciding on the 23rd.
 */
export function GiftGuideEmail({
  brand,
  subject = 'The gift guide for people who are hard to buy for',
  preview = 'Twelve things, none of them a novelty mug.',
  hero = {
    src: 'https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=1200&h=800&q=75&auto=format&fit=crop',
    alt: 'Table set with coffee and food',
    width: 600,
    height: 400,
  },
  eyebrow = 'Holiday 2026 · Order by 18 December',
  headline = (
    <>
      Gifts for people
      <br />
      who say they
      <br />
      want nothing
    </>
  ),
  intro = 'They do want something. It is coffee. It has always been coffee.',
  picks = {
    eyebrow: 'Under $30',
    products: [
      {
        image: {
          src: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Solstice',
          width: 600,
          height: 220,
        },
        name: 'Solstice',
        description: 'The one they will text you about',
        price: '$21',
      },
      {
        image: {
          src: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Wildflower Honey',
          width: 600,
          height: 220,
        },
        name: 'Wildflower Honey',
        description: 'From the roastery roof',
        price: '$12',
      },
      {
        image: {
          src: 'https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Pastry Box, Saturday',
          width: 600,
          height: 220,
        },
        name: 'Pastry Box, Saturday',
        description: 'Delivered to the door, warm-adjacent',
        price: '$28',
      },
      {
        image: {
          src: 'https://images.unsplash.com/photo-1447933601403-0c6688de566e?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Night Shift',
          width: 600,
          height: 220,
        },
        name: 'Night Shift',
        description: 'For the one who drinks it black',
        price: '$19',
      },
    ],
  },
  feature = {
    eyebrow: 'The big one',
    title: 'Twelve Months of Coffee',
    body: 'A different lot every month, chosen by whoever is on the cupping table that week. Arrives in a box that does not need wrapping, with a card you can actually write on.',
    price: '$228 · or $21/month',
    image: {
      src: 'https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea?w=1200&h=520&q=75&auto=format&fit=crop',
      alt: 'Coffee and breakfast spread',
      width: 600,
      height: 260,
    },
    cta: { label: 'Give a subscription', href: '#' },
  },
  giftCard = {
    eyebrow: 'Still deciding',
    title: 'A gift card, then',
    body: 'Delivered by email in about four seconds. Never expires, works in the café, and nobody has to pretend.',
    cta: { label: 'Send a gift card', href: '#' },
  },
  terms = 'Order by 18 December for delivery before the 24th in the continental US. Subscriptions gifted after the 18th start in January, and we will send a card you can hand over in the meantime.',
}: GiftGuideEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="0">
        <FullBleed {...hero} />
      </Band>

      <Band padding="34px 40px 30px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display size={40}>{headline}</Display>
        <Prose margin="16px auto 0" maxWidth={410}>
          {intro}
        </Prose>
      </Band>

      <Band padding="0 40px">
        <Rule />
      </Band>

      <Band padding="30px 40px 34px">
        <Centered>
          <Eyebrow>{picks.eyebrow}</Eyebrow>
        </Centered>
        <Spacer height={18} />
        <ProductGrid products={picks.products} rowGap={34} />
      </Band>

      <Band tone="dark">
        <Columns
          left={
            <>
              <Eyebrow tone="dark">{feature.eyebrow}</Eyebrow>
              <SectionTitle tone="dark">{feature.title}</SectionTitle>
              <Prose tone="dark" size={14} lineHeight={1.65} margin="0 0 18px">
                {feature.body}
              </Prose>
              <Price now={feature.price} tone="dark" />
              <OutlineButton href={feature.cta.href} tone="dark">
                {feature.cta.label}
              </OutlineButton>
            </>
          }
          right={<Plate {...feature.image} />}
        />
      </Band>

      <Band tone="paper" padding="34px 40px 40px" align="center">
        <Eyebrow>{giftCard.eyebrow}</Eyebrow>
        <SectionTitle>{giftCard.title}</SectionTitle>
        <Prose size={14} lineHeight={1.65} margin="0 auto 20px" maxWidth={380}>
          {giftCard.body}
        </Prose>
        <OutlineButton href={giftCard.cta.href} align="center">
          {giftCard.cta.label}
        </OutlineButton>
      </Band>

      <Band tone="ground" padding="22px 40px">
        <FinePrint>{terms}</FinePrint>
      </Band>
    </EmailLayout>
  );
}

export default GiftGuideEmail;