Quote Inset Feature

Feature289: Quote Inset Feature

A feature explained beside the proof of it: heading, paragraph and pill on one side, a client quote on a soft panel on the other, closed by three ruled facts across the foot.

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

Base UI flavor

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

This installs the block to components/beste/block/feature289.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Feature289, feature289Demo } from "@/components/beste/block/feature289";

export default function Page() {
  return <Feature289 {...feature289Demo} />;
}

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

import { Feature289 } from "@/components/beste/block/feature289";

export default function Page() {
  return (
    <Feature289
      eyebrow="The written note"
      heading="A few lines from us, the day after every session."
      description="Not a summary and not homework. A short note on what we heard."
      button={{ label: "Read a sample note", href: "/notes", tone: "outline" }}
      quote={{
        text: "I have every note from two years in a folder.",
        name: "Adrianne Lenker",
        context: "Individual therapy",
        avatar: { src: "/people/adrianne.jpg", alt: "Portrait of a client" },
      }}
      points={[
        { title: "Within a day", description: "Always before the next morning." },
        { title: "Yours to keep", description: "Read them back whenever you like." },
      ]}
    />
  );
}

Props

type Quote = {
  text: string;
  name: string;
  context: string;
  avatar: { src: string; alt: string };
};

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

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The quote is a real figure with a blockquote and a figcaption, so the attribution is bound to the words rather than being a paragraph that merely follows them.
• The panel is a flex with justify-between, so the attribution is pinned to the foot and a short quote does not leave the portrait floating in the middle of the card.
• The avatar sits on a bg-background circle inside the muted panel, so the empty ring reads as an inset rather than as a grey hole while the image loads.
• The foot facts are a dl with dt/dd pairs under one border-t, so three short facts read as a ruled row rather than as three more cards.
• Facts enter with a 0.1s stagger by index, resolving left to right.
• Every part is optional: without quote the copy column keeps its seven columns rather than stretching, and without points the section ends after the panel.
• Nothing in the quote panel is a link; the pill is the only interactive element in the section.