# Text-Only Blog Grid

> Text-only blog grid of six posts in three columns under a ruled top edge. Each post shows date, category, linked title, excerpt and a bold author name.

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-04).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/blog-04
- Screenshot: https://shadcn.exchange/shot/01orbital/blog-04/light.png
- Registry item: https://01orbital.dev/r/blog-04.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-04.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/heading`, `@01orbital/post`, `@01orbital/section`

## Files

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

```tsx
import { Heading } from "@/components/editorial/heading"
import {
  Post,
  PostAuthor,
  PostCategory,
  PostContent,
  PostDate,
  PostExcerpt,
  PostGroup,
  PostMeta,
  PostTitle,
} from "@/components/editorial/post"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Notes from the desk",
  body: "Short pieces from the people who answer the messages, every other week.",
} as const

const POSTS = [
  {
    category: "Support",
    title: "Say the answer first",
    description:
      "The customer asked one question. Answer it in the first line, then explain only what they still need.",
    datetime: "2026-09-25",
    date: "Sep 25, 2026",
    author: "Mae Jemison",
    href: "#",
  },
  {
    category: "Product",
    title: "Tags that mean something",
    description:
      "A tag earns its place when someone filters by it. We cut ours from forty to nine and reports got clearer.",
    datetime: "2026-09-11",
    date: "Sep 11, 2026",
    author: "Ellen Ochoa",
    href: "#",
  },
  {
    category: "Team",
    title: "The handoff note",
    description:
      "Three lines on what happened, what was tried and what is next. Whoever picks it up starts from there.",
    datetime: "2026-08-28",
    date: "Aug 28, 2026",
    author: "Chris Hadfield",
    href: "#",
  },
  {
    category: "Customers",
    title: "Thank the angry ones",
    description:
      "An angry message is a customer who still cares. The reply decides whether they stay that way.",
    datetime: "2026-08-14",
    date: "Aug 14, 2026",
    author: "Sally Ride",
    href: "#",
  },
  {
    category: "Operations",
    title: "Measure the slow week",
    description:
      "Averages hide the bad days. Track your slowest week each month and fix what caused it first.",
    datetime: "2026-07-30",
    date: "Jul 30, 2026",
    author: "Peggy Whitson",
    href: "#",
  },
  {
    category: "Support",
    title: "Saved replies, rewritten",
    description:
      "A saved reply is a draft, not a script. Ours now end with a line the agent writes for this one customer.",
    datetime: "2026-07-16",
    date: "Jul 16, 2026",
    author: "Tim Peake",
    href: "#",
  },
] as const

export default function Blog04() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <PostGroup cols={3} className="border-t border-foreground/10 pt-16">
          {POSTS.map((post) => (
            <Post key={post.title}>
              <PostContent>
                <PostMeta>
                  <PostDate dateTime={post.datetime}>{post.date}</PostDate>
                  <PostCategory>{post.category}</PostCategory>
                </PostMeta>
                <PostTitle>
                  <a href={post.href}>{post.title}</a>
                </PostTitle>
                <PostExcerpt>{post.description}</PostExcerpt>
                <PostMeta className="mt-3">
                  <PostAuthor className="font-semibold text-foreground">
                    {post.author}
                  </PostAuthor>
                </PostMeta>
              </PostContent>
            </Post>
          ))}
        </PostGroup>
      </SectionContent>
    </Section>
  )
}
```