# 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/blog59. 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 Card Trio

# Journal Card Trio[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## 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, so uneven excerpt lengths still line up along one baseline.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/blog59?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/blog59?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

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

### Quick start

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

tsxCopy

```
import { Blog59, blog59Demo } from "@/components/beste/block/blog59";

export default function Page() {
  return <Blog59 {...blog59Demo} />;
}
```

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

tsxCopy

```
import { Blog59 } from "@/components/beste/block/blog59";

export default function Page() {
  return (
    <Blog59
      badge={{ label: "Recently written" }}
      heading="Three pieces worth the fifteen minutes."
      description="Longer essays, each built around a project we can now talk about."
      posts={[
        {
          image: { src: "/journal/type.jpg", alt: "Printed letterforms" },
          category: "Typography",
          title: "Buying a typeface is the easy part",
          excerpt: "Licensing, hinting, fallback stacks and two conversations with legal.",
          author: "Ilse Brandt",
          date: "24 June 2026",
          href: "/journal/typefaces",
        },
      ]}
      button={{ label: "See all writing", href: "/journal" }}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                    |
| ----------- | ----------------- | ------- | ---------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7             |
| heading     | string            | –       | Section heading in the left column             |
| description | string            | –       | Supporting paragraph, right-aligned from md up |
| posts       | JournalPost\[\]   | \[\]    | One linked card per article                    |
| button      | ActionButton      | –       | Pill CTA under the grid, rendered as Button12  |
| className   | string            | –       | Extra classes for the outer <section>          |

tsCopy

```
type JournalPost = {
  image: { src: string; alt: string };
  category: string;
  title: string;
  excerpt: string;
  author: string;
  date: string;
  href: string;
};

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

### Behavior notes

* Cards are `flex flex-col` with the byline on `mt-auto`, so the ruled attribution aligns across all three cards no matter how long each excerpt runs.
* The gap above the byline rule comes from the excerpt's own `mb-8`, not from a margin on the byline: `mt-auto` collapses to zero in the tallest card, which would otherwise leave the rule pressed against the last line of that excerpt.
* The image sits in an `aspect-[4/3]` box with `object-cover` and no hover zoom or colour shift, following the set's rule that photos stay full colour and completely still.
* The whole card is one `next/link`, image included, rather than a separate title link.
* Author and date share one line separated by a middot, with only the author bolded, which keeps the byline a single visual unit under the rule.
* The grid is `md:grid-cols-3` and collapses to a single column below that, so the cards become a readable vertical feed on a phone instead of shrinking to a third of the width.
* Titles are `text-2xl md:text-3xl` and balanced, which is deliberately larger than a typical card grid: this set treats the journal as editorial, not as a widget.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog66)

PRO

blog66

### Topic Cards With Resource Counts

Three tinted topic cards, each stamped with how many pieces sit behind it, the topic name, and an image filling the lower half, alongside a link out to the full topic index.

[](/block/blog57)

FREE

blog57

### Journal Lead And Index

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.

[](/block/blog22)

PRO

blog22

### Full-Width Stacked Cards

Vertically stacked blog cards with 2:1 aspect ratio images. Full article summaries with author avatars and read more buttons. Long-form content showcase.

[](/block/blog5)

PRO

blog5

### Horizontal List with Icons

Vertical stack of horizontal blog cards with left-aligned thumbnails. Features calendar and clock icons for metadata, author titles, and tag badges.

[](/block/blog3)

FREE

blog3

### Card Grid with Authors

Three-column responsive grid of blog cards featuring author avatars, tag badges, and hover zoom effects. Clean card design with date and read time metadata.

[](/block/blog63)

PRO

blog63

### Topic Hub Card With Resource List

A topic hub card whose left third is a photo panel with the topic title set on a scrim over it, next to a two-column body: a short summary on one side and the posts belonging to the topic listed by title alone on the other.

## 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.