Sector Grouped Client Index

Logos15: Sector Grouped Client Index

Client proof organised by sector rather than dumped into a grid. Each ruled row names the sector, explains the kind of work it involves, and lines the matching grayscale logos up on the right edge, so the wall reads as an argument instead of a wallpaper.

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

Base UI flavor

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

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

Quick start

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

import { Logos15, logos15Demo } from "@/components/beste/block/logos15";

export default function Page() {
  return <Logos15 {...logos15Demo} />;
}

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

import { Logos15 } from "@/components/beste/block/logos15";

export default function Page() {
  return (
    <Logos15
      badge={{ label: "By sector" }}
      heading="Where the work tends to end up."
      sectors={[
        {
          title: "Culture",
          summary: "Museums, festivals and presses, where the audience reads everything twice.",
          logos: [
            { src: "/logos/one.png", alt: "One" },
            { src: "/logos/two.png", alt: "Two" },
          ],
        },
      ]}
      button={{ label: "Browse the archive", href: "/work" }}
    />
  );
}

Props

type SectorRow = {
  title: string;
  summary: string;
  logos: Logo[];
};

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

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

Behavior notes

• Rows use md:grid-cols-[minmax(0,16rem)_1fr_auto], so the sector name keeps a fixed measure, the summary takes the slack, and the logo cluster hugs the right edge however many marks it holds.
• Logos wrap with flex-wrap and md:justify-end, so a sector with five marks pushes onto a second line inside its own row rather than widening the column.
• Every mark keeps a constant opacity-50 grayscale and no hover state, which is the set's rule for logo walls.
• Rows are separated by border-t alone with vertical padding, so the block reads as a ruled index and adding a sector never disturbs the ones above it.
• Below md each row stacks to title, summary and a left-aligned logo cluster, keeping the sector grouping legible on a phone.
• Explaining each sector in a sentence is what makes the block worth more than a plain logo grid: it converts recognition into relevance for readers who know none of the names.