# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/blog57. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-29

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Blog](/blocks/blog)
5. /
6. Journal Lead And Index

# Journal Lead And IndexFREE

Editorial journal preview pairing one lead entry with a wide image, category, title, excerpt and date against a ruled index of three shorter entries, headed by an eyebrow, a display heading and an outline pill CTA.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/blog57`

## Blog57: Journal Lead And Index

Journal preview for landing pages: one lead entry carries a wide image, category, title, excerpt and date, while the narrow column beside it lists three shorter entries as hairline-ruled rows. The header pairs a parenthetical eyebrow and display heading with an outline pill link to the full archive.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/blog57"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/blog57"
```

This installs the block to `components/beste/block/blog57.tsx` plus the `badge7` eyebrow and `button12` pill button it uses.

### Quick start

The installed file exports `blog57Demo` alongside the block: the exact props behind the preview above. Spread it to get a working journal section in one line.

tsxCopy

```
import { Blog57, blog57Demo } from "@/components/beste/block/blog57";

export default function Page() {
  return <Blog57 {...blog57Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Blog57 } from "@/components/beste/block/blog57";

export default function Page() {
  return (
    <Blog57
      badge={{ label: "The journal" }}
      heading="What we work out in writing."
      featured={{
        image: { src: "/journal/brief.jpg", alt: "Printed brief on a studio table" },
        category: "Process",
        title: "The brief we now refuse to start without",
        excerpt: "The single sheet we ask for before anyone opens a design file.",
        meta: "12 April 2026 · 8 min read",
        href: "/journal/the-brief",
      }}
      posts={[
        {
          category: "Typography",
          title: "Setting a type scale that survives real copy",
          meta: "28 March 2026 · 6 min read",
          href: "/journal/type-scale",
        },
      ]}
      button={{ label: "Read every entry", href: "/journal" }}
      labels={{ listTitle: "Also this season" }}
    />
  );
}
```

### Props

| Prop      | Type              | Default | Description                                                     |
| --------- | ----------------- | ------- | --------------------------------------------------------------- |
| badge     | { label: string } | –       | Eyebrow label rendered as a Badge7                              |
| heading   | string            | –       | Section heading beside the archive link                         |
| featured  | FeaturedPost      | –       | Lead entry with the image, excerpt and date                     |
| posts     | PostLink\[\]      | \[\]    | Ruled index rows in the narrow column                           |
| button    | ActionButton      | –       | Outline pill link to the full archive, rendered as Button12     |
| labels    | Blog57Labels      | {}      | Fixed strings that are not content: the eyebrow above the index |
| className | string            | –       | Extra classes for the outer <section>                           |

tsCopy

```
type FeaturedPost = {
  image: { src: string; alt: string };
  category: string;
  title: string;
  excerpt: string;
  meta: string;
  href: string;
};

type PostLink = {
  category: string;
  title: string;
  meta: string;
  href: string;
};

type ActionButton = {
  label: string;
  href: string;
};

type Blog57Labels = {
  listTitle?: string;
};
```

### Behavior notes

* The whole lead entry is one `next/link`, image included, so the click target covers the card rather than the title alone; each index row is a link of its own for the same reason.
* `meta` is a single free-text string, not a date plus a read-time prop, so a row can read `12 April 2026 · 8 min read`, a season, or an issue number without any formatting logic in the block.
* The body grid is `md:grid-cols-[1.35fr_1fr]`, which keeps the lead image wide enough to hold the fold while the index stays a genuinely narrow column instead of a second equal card track.
* Neither the image nor the rows take a hover treatment, following the set's rule against zoom, colorize and border changes on cards; the link affordance comes from the cursor and the layout.
* Index rows are separated by their own `border-t` rather than a wrapper divider, so dropping to one or two entries still closes each row off cleanly.
* Category and date share the same muted `text-base` voice above and below the title, which is what makes a three-line row scan as one unit.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog43)

PRO

blog43

### Editorial Article Grid

A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline.

[](/block/blog44)

PRO

blog44

### Newsroom Lead and Index

A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.

[](/block/blog59)

PRO

blog59

### Journal Card Trio

Three linked journal cards, each with a four-by-three image, a category, a display title, an excerpt and a ruled byline pinned to the bottom of the card so uneven excerpts still align.

[](/block/blog27)

PRO

blog27

### Newspaper Editorial Style

Classic newspaper layout with serif fonts and bordered headline. Large main story on left, stacked secondary stories on right with dividers.

[](/block/blog58)

PRO

blog58

### Ruled Writing Index

Image-free article index where every entry is one ruled row carrying the date, the category, the title and the reading time with a corner arrow, stacking to a readable block on mobile.

[](/block/blog60)

PRO

blog60

### Featured Article With Recent List

A blog section pairing one linked feature with a hover-zoom image, category label, and byline against a hairline list of five recent posts stamped with their date.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.