# Blog Section 1

> A clean three-card layout with image placeholders, categories, titles and call-to-action links

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/blog-section-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnstore/blog-section-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/blog-section-1-light-46a5db8bfa857973.png
- Registry item: https://shadcnstore.com/r/blog-section-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/blog-section-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`

## Files

### `storage/app/registry-sources/marketing/blogs/blog-section-1/page.tsx`

```tsx
import { BlogSection1 } from "@/components/blocks/marketing/blogs/blog-section-1/components/blog-section-1"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <BlogSection1 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/marketing/blogs/blog-section-1/blog-section-1.tsx`

```tsx
'use client'

import { ArrowRightIcon } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'
import { blogs } from "@/components/data/blog-section-1-data"

export function BlogSection1() {
  return (
    <div className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
      <div className='grid grid-cols-1 gap-6 lg:grid-cols-3'>
        {blogs.map(blog => (
          <Card key={blog.id} className='overflow-hidden py-0'>
            <CardContent className='px-0'>
              <div className='aspect-video'>
                <img
                  src={blog.image}
                  alt={blog.title}
                  className='size-full object-cover dark:opacity-90 dark:brightness-[0.95] dark:invert'
                />
              </div>
              <div className='flex flex-col gap-3 p-6'>
                <p className='text-muted-foreground text-xs tracking-widest uppercase'>{blog.category}</p>
                <h3 className='text-xl font-bold'>{blog.title}</h3>
                <p className='text-muted-foreground'>{blog.description}</p>
                <a
                  href='/'
                  onClick={e => e.preventDefault()}
                  className='inline-flex items-center gap-2 hover:text-inherit hover:underline'
                >
                  Learn More
                  <ArrowRightIcon className='size-4' />
                </a>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}

export default BlogSection1
```

### `storage/app/registry-sources/marketing/blogs/blog-section-1/blog-section-1-data.ts`

```ts
export interface Blog {
  id: number
  image: string
  category: string
  title: string
  description: string
}

export const blogs: Blog[] = [
  {
    id: 1,
    image: 'https://ui.shadcn.com/placeholder.svg',
    category: 'Technology',
    title: 'AI Development Catalysts',
    description:
      'Exploring how AI-driven tools are transforming software development workflows and accelerating innovation.',
  },
  {
    id: 2,
    image: 'https://ui.shadcn.com/placeholder.svg',
    category: 'Lifestyle',
    title: 'Minimalist Living Guide',
    description:
      'Minimalist living approaches that can help reduce stress and create more meaningful daily experiences.',
  },
  {
    id: 3,
    image: 'https://ui.shadcn.com/placeholder.svg',
    category: 'Design',
    title: 'Accessible UI Trends',
    description:
      'How modern UI trends are embracing accessibility while maintaining sleek, intuitive user experiences.',
  },
]
```