Magazine Layout

An editorial grid that mixes large and small story cards across columns. Use it to give a content heavy blog the dense feel of a print magazine.

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardFooter } from '@/components/ui/card';
import {
  CalendarIcon,
  Clock3Icon,
  ArrowRightIcon,
  BookmarkIcon,
} from 'lucide-react';
import { Separator } from '@/components/ui/separator';

// Define blog post types
interface Author {
  name: string;
  avatar: string;
}

interface BlogPost {
  id: number;
  title: string;
  excerpt: string;
  category: string;
  date: string;
  readTime: string;
  imageUrl: string;
  author: Author;
}

const featuredPost: BlogPost = {
  id: 1,
  title: 'The Complete Guide to Content Marketing in the Digital Era',
  excerpt:
    'Discover how to create a comprehensive content strategy that drives engagement, builds authority, and converts prospects into loyal customers.',
  category: 'Content Strategy',
  date: 'April 15, 2023',
  readTime: '15 min read',
  imageUrl:
    'https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
  author: {
    name: 'Alexandra Chen',
    avatar:
      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
  },
};

const editorsPicks: BlogPost[] = [
  {
    id: 2,
    title: 'How to Create a Winning Social Media Strategy for 2023',
    excerpt:
      'Learn the essential components of an effective social media plan that aligns with your business goals.',
    category: 'Social Media',
    date: 'April 10, 2023',
    readTime: '8 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    author: {
      name: 'Marcus Johnson',
      avatar:
        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 3,
    title: 'Email Marketing Automation: Best Practices for 2023',
    excerpt:
      'Explore how to implement effective email automation that nurtures leads and drives conversions.',
    category: 'Email',
    date: 'April 5, 2023',
    readTime: '10 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1596526131083-e8c633c948d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    author: {
      name: 'Sophia Lee',
      avatar:
        'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
];

const trendingPosts: BlogPost[] = [
  {
    id: 4,
    title: "The Rise of Video Marketing: Why It's Essential for Your Business",
    excerpt:
      'Discover why video content has become a non-negotiable part of modern marketing strategies.',
    category: 'Video',
    date: 'April 2, 2023',
    readTime: '7 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80',
    author: {
      name: 'Daniel Rivera',
      avatar:
        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 5,
    title: 'Data-Driven Marketing: How to Use Analytics to Improve Campaigns',
    excerpt:
      'Learn how to leverage data to optimize your marketing efforts and improve ROI.',
    category: 'Analytics',
    date: 'March 28, 2023',
    readTime: '12 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    author: {
      name: 'Olivia Taylor',
      avatar:
        'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
  {
    id: 6,
    title: 'The Complete Guide to SEO: Ranking Higher in 2023',
    excerpt:
      "Master the essential SEO techniques to improve your website's visibility and organic traffic.",
    category: 'SEO',
    date: 'March 22, 2023',
    readTime: '14 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    author: {
      name: 'James Wilson',
      avatar:
        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    },
  },
];

export default function BlogSectionMagazineLayout() {
  return (
    <section className="container mx-auto px-4 py-24 md:px-6 2xl:max-w-[1400px]">
      <div className="mb-16 space-y-4 text-center">
        <h2 className="text-4xl font-bold tracking-tight">
          Digital Marketing Magazine
        </h2>
        <p className="text-muted-foreground mx-auto max-w-2xl">
          Cutting-edge insights, strategies, and trends to keep your marketing
          skills sharp.
        </p>
      </div>

      <div className="space-y-20">
        {/* Featured Article */}
        <div className="grid items-center gap-12 lg:grid-cols-2">
          <div className="relative aspect-[4/3] overflow-hidden rounded-xl">
            <img
              src={featuredPost.imageUrl}
              alt={featuredPost.title}
              className="object-cover"
            />
            <div className="absolute top-4 left-4 z-10">
              <Badge className="bg-primary text-primary-foreground hover:bg-primary/90">
                Featured
              </Badge>
            </div>
          </div>

          <div className="space-y-6">
            <div>
              <Badge variant="outline" className="mb-3">
                {featuredPost.category}
              </Badge>
              <h3 className="text-3xl font-bold tracking-tight">
                {featuredPost.title}
              </h3>
            </div>

            <p className="text-muted-foreground text-lg">
              {featuredPost.excerpt}
            </p>

            <div className="flex items-center gap-4">
              <div className="relative h-10 w-10 overflow-hidden rounded-full">
                <img
                  src={featuredPost.author.avatar}
                  alt={featuredPost.author.name}
                  className="object-cover"
                />
              </div>
              <div>
                <p className="font-medium">{featuredPost.author.name}</p>
                <div className="text-muted-foreground flex items-center text-sm">
                  <CalendarIcon className="mr-1 h-3 w-3" />
                  <span>{featuredPost.date}</span>
                  <span className="mx-2">•</span>
                  <Clock3Icon className="mr-1 h-3 w-3" />
                  <span>{featuredPost.readTime}</span>
                </div>
              </div>
            </div>

            <Button size="lg" asChild>
              <a href="#">Read Full Article</a>
            </Button>
          </div>
        </div>

        {/* Editor's Picks Section */}
        <div>
          <div className="mb-8 flex items-center gap-4">
            <h3 className="text-2xl font-bold">Editor&apos;s Picks</h3>
            <Separator className="flex-grow" />
          </div>

          <div className="grid gap-8 md:grid-cols-2">
            {editorsPicks.map((post) => (
              <Card
                key={post.id}
                className="overflow-hidden border-none shadow-lg"
              >
                <div className="relative aspect-[16/9]">
                  <img
                    src={post.imageUrl}
                    alt={post.title}
                    className="object-cover"
                  />
                  <div className="absolute top-4 left-4">
                    <Badge>{post.category}</Badge>
                  </div>
                </div>

                <CardContent className="space-y-4 pt-6">
                  <h4 className="line-clamp-2 text-xl font-bold">
                    {post.title}
                  </h4>
                  <p className="text-muted-foreground line-clamp-3">
                    {post.excerpt}
                  </p>
                </CardContent>

                <CardFooter className="flex items-center justify-between pt-0">
                  <div className="flex items-center gap-2">
                    <div className="relative h-8 w-8 overflow-hidden rounded-full">
                      <img
                        src={post.author.avatar}
                        alt={post.author.name}
                        className="object-cover"
                      />
                    </div>
                    <span className="text-sm font-medium">
                      {post.author.name}
                    </span>
                  </div>
                  <Button variant="ghost" size="sm" className="gap-1" asChild>
                    <a href="#">
                      <span>Read</span>
                      <ArrowRightIcon className="h-4 w-4" />
                    </a>
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>

        {/* Trending Section */}
        <div>
          <div className="mb-8 flex items-center gap-4">
            <h3 className="text-2xl font-bold">Trending Now</h3>
            <Separator className="flex-grow" />
          </div>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            {trendingPosts.map((post) => (
              <Card key={post.id} className="flex h-full flex-col">
                <div className="relative aspect-video">
                  <img
                    src={post.imageUrl}
                    alt={post.title}
                    className="object-cover transition-transform duration-300 hover:scale-105"
                  />
                  <div className="from-background/80 absolute inset-0 bg-gradient-to-t to-transparent opacity-0 transition-opacity duration-300 hover:opacity-100"></div>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="bg-background/50 hover:bg-background/70 absolute top-2 right-2"
                  >
                    <BookmarkIcon className="h-4 w-4" />
                  </Button>
                </div>

                <CardContent className="flex-grow py-4">
                  <Badge variant="outline" className="mb-2">
                    {post.category}
                  </Badge>
                  <h4 className="mb-2 line-clamp-2 font-semibold">
                    {post.title}
                  </h4>
                  <p className="text-muted-foreground mb-4 line-clamp-2 text-sm">
                    {post.excerpt}
                  </p>

                  <div className="text-muted-foreground mt-auto flex items-center text-sm">
                    <CalendarIcon className="mr-1 h-3 w-3" />
                    <span>{post.date}</span>
                    <span className="mx-2">•</span>
                    <Clock3Icon className="mr-1 h-3 w-3" />
                    <span>{post.readTime}</span>
                  </div>
                </CardContent>

                <CardFooter className="pt-0">
                  <Button variant="link" className="px-0" asChild>
                    <a href="#">
                      Read Article <ArrowRightIcon className="ml-1 h-4 w-4" />
                    </a>
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-16 flex justify-center">
        <Button variant="outline" size="lg" className="gap-2">
          <a href="#">View All Articles</a>
          <ArrowRightIcon className="h-4 w-4" />
        </Button>
      </div>
    </section>
  );
}

About this block

Magazine Layout opens with a centered heading and subheading, then moves into three stacked sections. The first is a two-column hero row: a large cover image on the left with a "Featured" badge, and on the right a category badge, the article title, a longer excerpt, an author avatar with name, publish date, and read time, and a full-size "Read Full Article" button. Below that, an "Editor's Picks" row holds two equal cards, each with a 16:9 cover image, a category badge, a title, an excerpt, an author avatar, and a ghost arrow button. The final section, "Trending Now", presents three equal cards with a video-ratio image, a bookmark button, a category badge, title, excerpt, date, read time, and a link-style "Read Article" button. A centered "View All Articles" button closes the block.

Every section heading is separated from its grid by a full-width rule, keeping the sections clearly named. The copy in each card is independent, so you can change titles, excerpts, dates, and authors without affecting the layout. You can add or remove cards from the Editor's Picks and Trending Now grids, and you can drop either secondary section entirely if you only need the hero row.

When to use

Reach for this block when you need a content-dense blog index that gives different stories different visual weight. A logistics and delivery platform publishes guides on route optimisation, carrier comparisons, and industry regulation; this layout lets you pin the flagship guide as the hero while keeping the editor picks and trending rows surfaced below it. It works better than a uniform grid when you have editorial tiers and want readers to understand at a glance which story is the lead.

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

Before

A hero section to establish the brand before readers reach the content feed
Announcement Banners to flag a new report or series before the index loads

After

A newsletter signup block to capture readers who finish scanning the feed
A CTA section to move engaged readers toward a product trial or contact page

What you can display

The block naturally holds any mix of articles that benefit from editorial ranking. A few ways to fill it:

Flagship content at the top. Use the hero row for your most thorough guide or report so it gets the space and authority it deserves.
Curated picks from the team. The Editor's Picks row is a natural home for staff-selected reads, seasonal roundups, or partner spotlights.
Recent or high-traffic posts. Feed the Trending Now grid with your latest posts or the articles that get the most visits each week.

Tip: keep category badges consistent across all three sections so readers can spot a topic they want and jump to it quickly.

About this block

When to use

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

Before

A hero section to establish the brand before readers reach the content feed
Announcement Banners to flag a new report or series before the index loads

After

A newsletter signup block to capture readers who finish scanning the feed
A CTA section to move engaged readers toward a product trial or contact page

What you can display

The block naturally holds any mix of articles that benefit from editorial ranking. A few ways to fill it:

Flagship content at the top. Use the hero row for your most thorough guide or report so it gets the space and authority it deserves.
Curated picks from the team. The Editor's Picks row is a natural home for staff-selected reads, seasonal roundups, or partner spotlights.
Recent or high-traffic posts. Feed the Trending Now grid with your latest posts or the articles that get the most visits each week.

Tip: keep category badges consistent across all three sections so readers can spot a topic they want and jump to it quickly.

Magazine Layout

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display