# Blog with Featured Post

> Two-column blog layout with one large featured post beside a divided list of three dated posts. Text only, no images, with a long excerpt on the featured story.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/blog-02).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/blog-02
- Screenshot: https://shadcn.exchange/shot/01orbital/blog-02/light.png
- Registry item: https://01orbital.dev/r/blog-02.json
- Categories: blog
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/blog-02.json
```

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

## Dependencies

- Registry items: `@01orbital/post`, `@01orbital/section`

## Files

### `blocks/blog/blog-02/index.tsx`

```tsx
import {
  Post,
  PostAuthor,
  PostContent,
  PostDate,
  PostExcerpt,
  PostGroup,
  PostMeta,
  PostTitle,
} from "@/components/editorial/post"
import {
  Section,
  SectionColumns,
  SectionContent,
} from "@/components/editorial/section"

const FEATURED = {
  href: "#",
  title: "How we cut first response time in half",
  excerpt:
    "Six months ago our median first reply took four hours. Here is what we changed in routing, staffing and saved replies to bring it under two, and what it asked of the team.",
  date: "2026-07-14",
  dateLabel: "Jul 14, 2026",
  author: "Sally Ride",
} as const

const POSTS = [
  {
    href: "#",
    title: "Routing rules that scale",
    description:
      "Start with three rules, not thirty. Add one only when a conversation lands in the wrong hands.",
    datetime: "2026-07-02",
    date: "Jul 2, 2026",
  },
  {
    href: "#",
    title: "Writing a help article",
    description:
      "Answer the question in the first line. Everything after it is for the reader who needs more detail.",
    datetime: "2026-06-24",
    date: "Jun 24, 2026",
  },
  {
    href: "#",
    title: "Weekends without a backlog",
    description:
      "A rota of two and a short list of saved replies keep Monday from starting with a pile.",
    datetime: "2026-06-11",
    date: "Jun 11, 2026",
  },
] as const

export default function Blog02() {
  return (
    <Section>
      <SectionContent>
        <SectionColumns>
          <PostGroup cols={1} className="max-w-lg">
            <Post size="lg">
              <PostContent>
                <PostMeta>
                  <PostDate dateTime={FEATURED.date}>
                    {FEATURED.dateLabel}
                  </PostDate>
                  <PostAuthor>{FEATURED.author}</PostAuthor>
                </PostMeta>
                <PostTitle>
                  <a href={FEATURED.href}>{FEATURED.title}</a>
                </PostTitle>
                <PostExcerpt>{FEATURED.excerpt}</PostExcerpt>
              </PostContent>
            </Post>
          </PostGroup>
          <PostGroup cols={1} variant="divided">
            {POSTS.map((post) => (
              <Post key={post.title}>
                <PostContent className="max-w-xl">
                  <PostMeta>
                    <PostDate dateTime={post.datetime}>{post.date}</PostDate>
                  </PostMeta>
                  <PostTitle>
                    <a href={post.href}>{post.title}</a>
                  </PostTitle>
                  <PostExcerpt>{post.description}</PostExcerpt>
                </PostContent>
              </Post>
            ))}
          </PostGroup>
        </SectionColumns>
      </SectionContent>
    </Section>
  )
}
```