Editorial Issue Bento

Bento9: Editorial Issue Bento

An issue contents page laid out as a mosaic. The cover story takes a large photographic tile with its category on top and its page count on a rule, an inverted figure states the extent, a bordered tile explains the subscription, and the remaining articles sit in soft tiles beside them.

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

Base UI flavor

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

This installs the block to components/beste/block/bento9.tsx plus the badge7 eyebrow it uses.

Quick start

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

import { Bento9, bento9Demo } from "@/components/beste/block/bento9";

export default function Page() {
  return <Bento9 {...bento9Demo} />;
}

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

import { Bento9 } from "@/components/beste/block/bento9";

export default function Page() {
  return (
    <Bento9
      badge={{ label: "This issue" }}
      heading="One cover story and everything printed beside it."
      cover={{
        src: "/issue/cover.jpg",
        alt: "Printed letterforms as a type specimen",
        category: "Cover story",
        title: "The alphabet that took nine months and one apology",
        meta: "Issue 12 · 22 pages",
        href: "/issue/12/alphabet",
      }}
      stories={[
        { category: "Interface", title: "Reading is not a feature", meta: "8 pages", href: "/issue/12/reading" },
        { category: "Materials", title: "Cloth, board and the cost of both", meta: "6 pages", href: "/issue/12/cloth" },
      ]}
      figure={{ value: "200", title: "Pages, no advertising" }}
      subscribe={{
        title: "Printed twice a year",
        description: "Posted to anyone who has worked with the studio.",
      }}
    />
  );
}

Props

type CoverStory = {
  src: string;
  alt: string;
  category: string;
  title: string;
  meta: string;
  href: string;
};

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

type FigureTile = {
  value: string;
  title: string;
};

type SubscribeTile = {
  title: string;
  description: string;
};

Behavior notes

• The cover tile spans md:col-span-4 md:row-span-2 and uses justify-between, so its category badge stays pinned to the top of the picture while the title and page count sit at the foot.
• Its Badge7 is passed className="text-background/70", which is how the eyebrow reads on a photograph instead of resolving to the page's foreground token.
• The whole cover tile is a Link, so the photograph, title and meta are one target rather than a small link under an image.
• Story tiles use justify-between gap-4 with the meta line on a border-t border-current/10 rule, so titles of different lengths still line their page counts up along the bottom of the row.
• The subscription tile is the only bordered surface and carries no button, which keeps a text-heavy tile from overflowing on a tablet.
• Only the figure tile is inverted, giving the mosaic exactly one dark anchor; its text-background tokens are hardcoded because that surface is fixed rather than adaptive.
• The tiles fill six columns per row (4+2, 4+2, then 2+2+2), so the cover, figure, subscription and three stories leave no gap at the end of a row.