Press Quote CardPRO

Logos16: Press Quote Card

A single raised card holding three publication marks side by side, each with the line that publication wrote underneath it, over a soft section band.

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

Base UI flavor

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

This installs the block to components/beste/block/logos16.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { Logos16, logos16Demo } from "@/components/beste/block/logos16";

export default function PressPage() {
  return <Logos16 {...logos16Demo} />;
}

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

import { Logos16 } from "@/components/beste/block/logos16";

export default function PressPage() {
  return (
    <Logos16
      eyebrow="In the press"
      items={[
        {
          logo: { src: "/press/halcyon.png", alt: "The Halcyon Post" },
          quote: "\u201cThey made the argument for writing a studio process down.\u201d",
        },
        {
          logo: { src: "/press/northwind.png", alt: "Northwind Review" },
          quote: "\u201cRare in treating the identity and the product as one piece of work.\u201d",
        },
      ]}
      footnote="Coverage from the last eighteen months."
    />
  );
}

Props

type PressItem = {
  logo: PressLogo;
  quote: string;
};

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

Behavior notes

• Quotation marks are part of the quote string rather than added by the block, so a line can be quoted, paraphrased or attributed however the publication allows.
• Logos are object-contain in a fixed height box, so marks of different widths sit on the same optical line without being stretched.
• The card sits on a bg-muted/40 band and carries the page background itself, which is what makes it read as raised without a shadow.
• Columns stack on mobile with the logo above its line each time, so a quote never separates from the publication that wrote it.
• Nothing here is a link. It is a claim panel, not navigation.