Newsletter Preview

A signup block showing a small preview of the newsletter content beside the email field. Sets reader expectations before they subscribe to it.

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Calendar, Clock, ArrowRight, NewspaperIcon } from 'lucide-react';

export default function NewsletterPreview() {
  return (
    <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      <div className="grid items-center gap-8 lg:grid-cols-2 lg:gap-12">
        <div>
          <h2 className="text-primary max-w-4xl text-3xl leading-tight font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-4xl xl:tracking-tighter">
            Get Weekly Insights Delivered
          </h2>
          <p className="text-foreground mt-4 max-w-4xl text-base text-balance sm:text-lg">
            Join thousands of professionals who rely on our newsletter for the
            latest trends, tips, and industry news.
          </p>

          <form className="mt-8">
            <div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
              <div className="w-full">
                <Label htmlFor="subscribe-input" className="sr-only">
                  Email address
                </Label>
                <Input
                  type="email"
                  id="subscribe-input"
                  name="subscribe-input"
                  placeholder="Enter your email address"
                />
              </div>
              <Button className="w-full sm:w-auto">
                Subscribe Now
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
            <p className="text-muted-foreground mt-3 text-sm">
              No spam. Unsubscribe anytime. 12,000+ readers trust us.
            </p>
          </form>
        </div>

        <div className="order-first lg:order-last">
          <Card className="border-border border shadow-sm">
            <CardHeader className="pb-4">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold">Weekly Digest</h3>
                <div className="text-muted-foreground flex items-center text-sm">
                  <Calendar className="mr-1 h-4 w-4" />
                  Issue #47
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="border-border border-b pb-4">
                <h4 className="text-primary mb-2 font-semibold">
                  Featured Article: The Future of Web Development
                </h4>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Discover the latest trends shaping modern web development,
                  from AI integration to performance optimization...
                </p>
                <div className="text-muted-foreground mt-2 flex items-center text-xs">
                  <Clock className="mr-1 h-3 w-3" />5 min read
                </div>
              </div>

              <div className="space-y-3">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <h5 className="text-sm font-medium">Industry News</h5>
                    <p className="text-muted-foreground text-xs">
                      Latest updates from tech leaders
                    </p>
                  </div>
                </div>

                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <h5 className="text-sm font-medium">Tools & Resources</h5>
                    <p className="text-muted-foreground text-xs">
                      Handpicked developer tools
                    </p>
                  </div>
                </div>

                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <h5 className="text-sm font-medium">Community Spotlight</h5>
                    <p className="text-muted-foreground text-xs">
                      Featured community projects
                    </p>
                  </div>
                </div>
              </div>

              <div className="border-border border-t pt-4">
                <p className="text-muted-foreground text-xs">
                  Thanks for reading! Share this with your colleagues.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

About this block

Newsletter Preview is a two-column signup section. The left column holds a heading, a short supporting sentence, an email input with an inline submit button, and a small reassurance line showing subscriber count and an unsubscribe note. The right column shows a bordered card that mimics a real issue of the newsletter: a header row with the digest title and issue number, a featured article with a title, a short excerpt, and a read-time label, a short list of recurring sections (Industry News, Tools and Resources, Community Spotlight), and a closing footer line.

The heading, supporting copy, and reassurance text are all independent. The preview card's article title, excerpt, section names, and issue number can each be rewritten to match your actual content. The card column sits above the form on small screens and moves to the right on wider viewports, so you can safely adjust copy length without breaking the layout.

When to use

Reach for this block when you need to convince a cautious visitor to hand over their email. A plain centered form asks for trust on faith; this layout earns it by showing exactly what lands in the inbox. It suits a dedicated newsletter landing page, a mid-page signup on a property listings blog, or any real estate marketplace that sends curated market reports and works hard to convey editorial quality before the first signup.

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the brand and establish context before asking for a commitment
Stats showing audience size or market reach to build credibility just above the form

After

Testimonials to reinforce the decision with social proof from existing subscribers
A footer to close the page cleanly after the signup call to action

What you can display

The preview card is the differentiator here. A few ways to use it well:

A real past issue. Pull the actual featured article and section titles from your most recent send so the preview is always current and honest.
A category digest. For a marketplace newsletter, swap the sections to reflect your content pillars such as new listings, market data, and agent spotlights.
A curated resource roundup. Use the featured slot for a top resource and the section list for recurring content types so readers know the format before they commit.

Tip: keep the featured article excerpt to two short sentences so the card stays compact and the form remains the dominant action on the page.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the brand and establish context before asking for a commitment
Stats showing audience size or market reach to build credibility just above the form

After

Testimonials to reinforce the decision with social proof from existing subscribers
A footer to close the page cleanly after the signup call to action

What you can display

The preview card is the differentiator here. A few ways to use it well:

A real past issue. Pull the actual featured article and section titles from your most recent send so the preview is always current and honest.
A category digest. For a marketplace newsletter, swap the sections to reflect your content pillars such as new listings, market data, and agent spotlights.
A curated resource roundup. Use the featured slot for a top resource and the section list for recurring content types so readers know the format before they commit.

Tip: keep the featured article excerpt to two short sentences so the card stays compact and the form remains the dominant action on the page.

Newsletter Preview

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display