Wide Band With Field Facts

Feature253: Wide Band With Field Facts

A wide cinematic photograph with a pill label pinned into its corner, opened by a heading with the CTA beside it and closed by four ruled facts, each one a title, a figure and a sentence of context.

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

Base UI flavor

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

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

Quick start

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

import { Feature253, feature253Demo } from "@/components/beste/block/feature253";

export default function Page() {
  return <Feature253 {...feature253Demo} />;
}

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

import { Feature253 } from "@/components/beste/block/feature253";

export default function Page() {
  return (
    <Feature253
      badge={{ label: "Field test" }}
      heading="Built for the wall, not for the presentation."
      description="We install the first pieces ourselves and photograph them in the light they will live in."
      image={{ src: "/case/entrance.jpg", alt: "Glass and steel building front" }}
      labels={{ imageLabel: "Kestrel Group, west entrance" }}
      facts={[
        {
          title: "Legibility distance",
          value: "18 m",
          description: "Tested at dusk and under the building's own lighting.",
        },
        {
          title: "Install time per panel",
          value: "24 min",
          description: "Two people, one drill, no special tooling required.",
        },
      ]}
      button={{ label: "See the specification", href: "/work/kestrel" }}
    />
  );
}

Props

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

type BandFact = {
  title: string;
  value: string;
  description: string;
};

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

type Feature253Labels = {
  imageLabel?: string;
};

Behavior notes

• The CTA sits in the header on the heading's baseline (items-end) rather than under the facts, so the section closes on evidence instead of on a button.
• The image label is an absolutely positioned pill on bg-background, inset further on desktop (left-6 top-6) than on mobile, so it never crowds the corner of a small crop.
• The band switches ratio rather than height: aspect-[16/10] on mobile becomes md:aspect-[21/9], keeping the crop cinematic on desktop without going letterbox-thin on a phone.
• Facts render as a real dl, with the figure and its sentence inside one dd so the title stays the term and everything below it stays the definition.
• Each fact opens on border-t pt-6, which is what makes the row read as a ruled index rather than four boxes.
• The fact grid steps one, two then four columns (sm:grid-cols-2 lg:grid-cols-4), so a four-fact set never squeezes into narrow columns on a tablet.
• Every part is optional: without image the facts follow the paragraph directly, and without facts the section ends on the band.