Editorial Article LayoutPRO

Post87: Editorial Article Layout

Full article layout: an eyebrow over an oversized light title, a lead paragraph, and an author row framed by hairlines, then a wide lead image above prose sections with accent-bulleted lists, an accent-ruled pull quote after the opening section, and a share row to close.

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

Base UI flavor

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

This installs the block to components/beste/block/post87.tsx plus the badge23 and button21 components it uses for the eyebrow and the share actions.

Quick start

The installed file exports post87Demo alongside the block: the exact props behind the preview above. Spread it to get a working article in one line.

import { Post87, post87Demo } from "@/components/beste/block/post87";

export default function ArticlePage() {
  return <Post87 {...post87Demo} />;
}

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

import { Post87 } from "@/components/beste/block/post87";

export default function ArticlePage() {
  return (
    <Post87
      badge={{ label: "Operations" }}
      title="The eleven seconds that decide your Tuesday"
      lead="Rebooking is the smallest task in a clinic and the one that sets the tone."
      author={{
        name: "Marcus Vale",
        role: "Product, scheduling",
        avatar: { src: "/images/marcus.jpg", alt: "Portrait of Marcus Vale" },
      }}
      meta="April 22, 2026 · 6 min read"
      image={{ src: "/images/desk.jpg", alt: "A reception desk in soft light" }}
      sections={[
        { paragraphs: ["We spent a month behind reception desks with a stopwatch."] },
        {
          heading: "What the stopwatch found",
          paragraphs: ["Rebooking took two minutes forty when it needed a call back."],
          bullets: ["Eleven seconds: one screen, one confirmation, done"],
        },
      ]}
      quote={{
        text: "Nobody asks for faster software. They ask to stop apologising.",
        attribution: "A practice manager in Utrecht",
      }}
      share={{
        label: "Found this useful?",
        links: [{ label: "Read the next one", href: "/blog" }],
      }}
    />
  );
}

Props

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

type Author = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};

type PostSection = {
  heading?: string;
  paragraphs: string[];
  bullets?: string[];
};

type PullQuote = { text: string; attribution?: string };

type Share = { label: string; links?: ActionLink[] };

Behavior notes

• The pull quote is placed by position, not by data: it renders after the section at index 0. Moving it means reordering sections so the intended opening comes first.
• Sections carry an optional heading, so the opening section can run straight on from the standfirst while later ones get their own h2. The outline stays correct either way under the title's h1.
• Prose is capped at max-w-3xl while the lead image spans the full container width, which is what gives the article its wide-image, narrow-column rhythm.
• The byline row is bounded by rules top and bottom (border-y), and it stacks the author above the meta line below sm rather than squeezing them onto one line.
• The avatar is a fixed size-10 circle with the image absolutely filling it, so a portrait crop of any aspect ratio lands square without distorting.
• Bullets use an accent dot offset onto the first line of the item, matching the highlight lists elsewhere in the set rather than a check icon, which would read as a feature list.
• Everything is display copy: no reading time is calculated, no date is parsed, and the share links are ordinary links rather than share intents.