Press Quote Card

In the press
The Halcyon Post

“They made the argument for writing a studio process down before trying to grow one.”

Northwind Review

“Rare in treating the identity and the product that carries it as a single piece of work.”

Quillpoint Weekly

“Their essay on flat fees is quietly circulating through every young practice.”

Coverage from the last eighteen months. The full press kit is available on request.

About this block

Press Quote CardPRO

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.

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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

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

Base UI flavor

bash
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.

tsx
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:

tsx
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

PropTypeDefaultDescription
eyebrowstring–Badge6 label above the card, centered
itemsPressItem[][]One publication and its line per column
footnotestring–Centered line under the card
classNamestring–Extra classes for the outer section
ts
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.

More Logos blocks

View all Logos
PRO

logos18

Press Notes

PRO

logos6

Logo Grid with Card Backgrounds

PRO

logos10

Logos Split

Get Pro access