Logospopular

Props

Source apps/www/src/sections/Logos.astro @ gitt.one

---
/**
 * Logos — a row of client, partner or certification logos (<Logo>) on a muted
 *   band, under a small uppercase title.
 *
 * Use for: "trusted by", "our partners", "certified by" — recognition, not
 *   contact.
 * Not for: partners the reader should contact (<LogoCards>).
 * Children: <Logo image title href /> tags. Logos are shown at one height
 *   (48px) and kept in proportion; on a dark or brand band they are turned
 *   white automatically, so dark marks on transparent backgrounds work best.
 * Layout: `columns` 3–6 (default 5) on desktop; two per row on phones.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** a small uppercase line above the row, e.g. "Trusted by" */
  title?: string;
  /** a sentence under that line */
  description?: string;
  /** logos per row on desktop */
  columns?: 3 | 4 | 5 | 6;
  /** background of the band (default "muted") */
  theme?: Theme;
}
const { id, title, description, columns = 5, theme = 'muted' } = Astro.props;
const cols = { 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 5: 'md:grid-cols-3 lg:grid-cols-5', 6: 'md:grid-cols-3 lg:grid-cols-6' }[columns];
---

<Section id={id} theme={theme} class="!py-10">
  {title && (
    <p class="text-center text-sm font-semibold uppercase tracking-wide text-gray-600 [.bg-stone-800_&]:text-primary-100">{title}</p>
  )}
  {description && <p class="mx-auto mt-2 max-w-2xl text-center text-gray-500">{description}</p>}
  <ul class:list={['mt-6 grid list-none grid-cols-2 gap-8', cols]} data-variant="row">
    <slot />
  </ul>
</Section>