Full-Bleed Workspace Band

Feature268: Full-Bleed Workspace Band

A feature that breaks its media out of the container into a full-bleed image band floating a live view switcher, framed by a two-column header above and three numbered captions below.

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

Base UI flavor

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

This installs the block to components/beste/block/feature268.tsx, the toolbar21 view-switcher piece it floats on the band (installed to components/beste/piece/toolbar21.tsx), and the badge23 component it uses for the eyebrow.

Quick start

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

import { Feature268, feature268Demo } from "@/components/beste/block/feature268";

export default function Page() {
  return <Feature268 {...feature268Demo} />;
}

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

import { CalendarDays, List, Rows3 } from "lucide-react";
import { Feature268 } from "@/components/beste/block/feature268";
import { Toolbar21 } from "@/components/beste/piece/toolbar21";

export default function Page() {
  return (
    <Feature268
      badge={{ label: "Same data, three shapes" }}
      heading="Everyone reads the week differently, so let them"
      description="The receptionist wants a list, the clinician wants their own day, and the manager wants the rooms."
      image={{ src: "/backdrops/soft.jpg", alt: "Soft gradient backdrop" }}
      media={
        <Toolbar21
          segments={[
            { icon: List, label: "List" },
            { icon: CalendarDays, label: "Week" },
            { icon: Rows3, label: "Rooms" },
          ]}
          activeIndex={1}
          count="142 appointments"
          filterLabel="All sites"
        />
      }
      captions={[
        {
          index: "01",
          title: "List, for the front desk",
          description: "Everything arriving today in one column, sorted by time.",
        },
        {
          index: "02",
          title: "Week, for clinicians",
          description: "Your own rota with gaps visible, so swapping a slot is one move.",
        },
      ]}
    />
  );
}

Props

type BandImage = {
  src: string;
  alt: string;
};

type Caption = {
  index: string;
  title: string;
  description: string;
};

Behavior notes

• The container is opened and closed twice. The header sits in a max-w-7xl wrapper, the band is a direct child of the section so it runs edge to edge, and the captions open a fresh wrapper underneath. That is what lets one section mix gridded and full-bleed content.
• The band has no rounding and no border, unlike the tiles elsewhere in the set. It is meant to read as a slice of the page rather than as a framed image.
• media fills the band with size-full, so the piece positions itself inside the full band width. Pieces center themselves in their own root, which is what keeps the switcher in the middle of a very wide band.
• Caption count is not enforced, but the grid is md:grid-cols-3, so three is the number the layout is built for. A fourth caption wraps onto a second row.
• Each caption carries its own border-t, so the rules are per column and stop at the gaps rather than running across them.
• index is copy, not a computed counter, so the numbering survives reordering untouched.