Current Work Tile GridPRO

Feature255: Current Work Tile Grid

A display statement, a paragraph with the CTA opposite it, and three tall portrait tiles captioned on their own rules. Built for showing what a studio has on the bench right now.

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

Base UI flavor

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

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

Quick start

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

import { Feature255, feature255Demo } from "@/components/beste/block/feature255";

export default function Page() {
  return <Feature255 {...feature255Demo} />;
}

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

import { Feature255 } from "@/components/beste/block/feature255";

export default function Page() {
  return (
    <Feature255
      badge={{ label: "Three at a time" }}
      heading="A studio that only runs three projects at once."
      description="When one ships, a slot opens and the waiting list moves by one name."
      button={{ label: "Ask about the next slot", href: "/contact" }}
      tiles={[
        {
          src: "/current/marchetti.jpg",
          alt: "Coffee packaging on concrete",
          title: "Marchetti Coffee",
          meta: "Packaging, in production",
        },
        {
          src: "/current/kestrel.jpg",
          alt: "Signage across a lobby wall",
          title: "Kestrel Group",
          meta: "Wayfinding, installing",
        },
      ]}
    />
  );
}

Props

type WorkTile = {
  src: string;
  alt: string;
  title: string;
  meta: string;
};

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

Behavior notes

• The heading runs the full width at leading-[0.98], and only the paragraph below it is constrained, so the statement stays the largest thing on the page without pushing the CTA down.
• The paragraph row is md:items-end with md:justify-end on the button wrapper, so the pill sits on the paragraph's last baseline at the right edge rather than under the copy.
• Below md the button drops under the paragraph at its natural width, so nothing is stretched to full width on a phone.
• Tiles render as real figure and figcaption elements, with the caption on a border-t rule under the picture rather than on a scrim inside it.
• The aspect-[4/5] portrait ratio holds at every width, so three tiles keep a consistent rhythm across the row and stack cleanly on a phone.
• Photographs carry no hover treatment and are not links, which is deliberate: this section states what is in progress, it is not an index to click through.
• Everything is optional: without tiles the block is a statement with a CTA, and without button the paragraph simply takes the row.