# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/logos16. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Logos](/blocks/logos)
5. /
6. Press Quote Card

# Press Quote Card[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/logos16`

## 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 NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

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

tsxCopy

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

tsxCopy

```
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

| Prop      | Type          | Default | Description                             |
| --------- | ------------- | ------- | --------------------------------------- |
| eyebrow   | string        | –       | Badge6 label above the card, centered   |
| items     | PressItem\[\] | \[\]    | One publication and its line per column |
| footnote  | string        | –       | Centered line under the card            |
| className | string        | –       | Extra classes for the outer section     |

tsCopy

```
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](/blocks/logos)

[](/block/logos6)

PRO

logos6

### Logo Grid with Card Backgrounds

Responsive grid of partner or client logos. Each logo sits inside a softly tinted, rounded card so mixed-style logos (marks, wordmarks, scanned seals) all feel cohesive.

[](/block/logos11)

PRO

logos11

### Logos With Stat

A headline stat of trust above a centered row of client wordmarks.

[](/block/logos10)

PRO

logos10

### Logos Split

Headline and blurb beside a grid of client wordmarks.

[](/block/logos7)

PRO

logos7

### Logo Cloud

Centered grid of client wordmarks with a trusted-by intro.

[](/block/logos12)

FREE

logos12

### Hairline Client Wall

A client wall that sets six greyscale logos in a hairline cell grid, each lifting to full colour on hover, with an eyebrow and a short claim on the left, a reach line on the right, and a credit note underneath.

[](/block/logos9)

PRO

logos9

### Logo Grid Wall

Partitioned bordered grid of client wordmark cells.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.