Newspaper Editorial Style

Blog27: Newspaper Editorial Style

A newspaper-style editorial layout that renders a bordered masthead (uppercase serif heading, an optional badge, and a lead description) above a two-column grid where the first post becomes a large featured story on the left with a hover-zoom image, title, summary, and author byline, and the remaining posts stack as compact divider-separated rows on the right.

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/blog27?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/blog27.tsx, plus the badge shadcn/ui primitive it uses for the masthead eyebrow badge.

Quick start

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

import { Blog27, blog27Demo } from "@/components/beste/block/blog27";

export default function Page() {
  return <Blog27 {...blog27Demo} />;
}

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

import { Blog27 } from "@/components/beste/block/blog27";

export default function Page() {
  return (
    <Blog27
      badge={{ label: "The Daily", variant: "default" }}
      heading="Today's Headlines"
      description="Breaking news and top stories."
      posts={[
        {
          image: { src: "/lead.jpg", alt: "Lead story" },
          title: "The Future of Design Systems",
          summary: "Exploring how design systems are evolving.",
          date: "January 15, 2026",
          author: { name: "Lisa Park", title: "Senior Developer" },
          href: "/blog/design-systems",
        },
        {
          image: { src: "/api.jpg", alt: "API design" },
          title: "Building Scalable APIs",
          summary: "Best practices for high-traffic APIs.",
          date: "January 12, 2026",
          author: { name: "David Chen" },
          href: "/blog/scalable-apis",
        },
      ]}
    />
  );
}

Props

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

type Tag = {
  label: string;
  href?: string;
};

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  author?: Author;
  tags?: Tag[];
  href?: string;
};

Behavior notes

• The grid splits posts positionally: posts[0] is the featured story spanning lg:col-span-3, and posts.slice(1) renders in the lg:col-span-2 sidebar; if posts is empty, both the featured <article> and the sidebar map render nothing.
• Every post links through the shadcn Link (next/link) to post.href, falling back to "#" when href is omitted, so a post without an href is still clickable but goes nowhere.
• The byline is built inline as By {author?.name} · {date} on the featured post and {author?.name} · {date} on side posts; if author or date is missing, the surrounding text and separator dot still render, leaving stray · characters.
• Only image, title, summary, date, author.name, and href are consumed by the markup: author.title, author.avatar, author.href, readTime, and every field on tags are accepted by the types but never rendered.
• The featured image zooms via group-hover/blog27-main:scale-105 inside an overflow-hidden aspect-video box, and both featured and side titles shift to text-primary on hover through named group/blog27-main and group/blog27 scopes.
• Side-post summaries are clamped to two lines with line-clamp-2, and each side row carries a bottom border removed on the last item via last:border-0.
• Text is plain string interpolation with no dangerouslySetInnerHTML, so inline markup such as <strong> inside heading or title is not supported and would render as escaped text.