Image Topped Discipline Cards

Feature249: Image Topped Discipline Cards

Four soft cards, each opening with a photograph and closing on a ruled fact line, under a two-column header. The pill CTA sits under the row, so the whole section reads as one catalogue page.

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

Base UI flavor

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

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

Quick start

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

import { Feature249, feature249Demo } from "@/components/beste/block/feature249";

export default function Page() {
  return <Feature249 {...feature249Demo} />;
}

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

import { Feature249 } from "@/components/beste/block/feature249";

export default function Page() {
  return (
    <Feature249
      badge={{ label: "The four rooms" }}
      heading="Everything we make falls into one of these."
      description="Four disciplines, photographed where each stops being a file."
      cards={[
        {
          src: "/disciplines/type.jpg",
          alt: "Printed letterforms",
          title: "Letterforms",
          description: "Commissioned type and the licensing that keeps it usable.",
          meta: "Four typefaces drawn since 2019",
        },
        {
          src: "/disciplines/packaging.jpg",
          alt: "Unbranded paper packaging",
          title: "Packaging",
          description: "Structure, artwork and die lines a producer will accept.",
          meta: "Eleven ranges in production",
        },
      ]}
      button={{ label: "Commission one of these", href: "/contact" }}
    />
  );
}

Props

type FeatureCard = {
  src: string;
  alt: string;
  title: string;
  description: string;
  meta: string;
};

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

Behavior notes

• Cards are flex flex-col with the meta line on mt-auto, so the ruled fact stays flush with the bottom of every card even when one description runs two lines longer than the rest.
• That closing rule is border-current/10 rather than the default border token, which keeps it a shade of the card's own surface instead of a hard line across it.
• The image sits inside the card's overflow-hidden rounded-md, so the picture inherits the card's top corners without a second radius.
• Photographs hold aspect-[4/3] at every width and carry no hover treatment, which is deliberate: the pictures are content here, not affordances.
• The grid steps from one column to sm:grid-cols-2 and then lg:grid-cols-4, so a four-card set stays a two-by-two block on a tablet instead of squeezing into four narrow columns.
• The header is md:items-end, so the supporting paragraph sits on the heading's baseline rather than beside its first line.
• The CTA is in a flex wrapper under the row, which keeps the pill at its natural width and left-aligned with the grid.