Journal Card TrioPRO

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.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

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

Base UI flavor

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.

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:

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

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.