LogoCards

Props

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

---
/**
 * LogoCards — logos as white cards with a name and contacts under them (<Logo
 *   image title email phone />).
 *
 * Use for: distributors, resellers, partner offices — where the reader is
 *   meant to get in touch, not just recognise a brand.
 * Not for: a plain logo row (<Logos>).
 * Children: <Logo> tags with `title` and at least `email` or `phone`; a <Logo>
 *   without contacts renders as a bare logo in the grid.
 * Layout: `columns` 2–4 (default 3).
 */
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 grid */
  title?: string;
  /** a sentence under that line */
  description?: string;
  /** cards per row on desktop */
  columns?: 2 | 3 | 4;
  /** background of the section (default "muted") */
  theme?: Theme;
}
const { id, title, description, columns = 3, theme = 'muted' } = Astro.props;
const cols = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-2 md:grid-cols-3', 4: 'sm:grid-cols-2 md:grid-cols-4' }[columns];
---

<Section id={id} theme={theme}>
  {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-1 gap-5', cols]} data-variant="cards">
    <slot />
  </ul>
</Section>