ProductCards

Props

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

---
/**
 * ProductCards — the catalog teaser: a heading on a dark band and the
 *   <Product> cards straddling its lower edge onto the white below.
 *
 * Use for: the product overview on a home page — two to four models, each with
 *   a picture, a name and a link to its own page.
 * Not for: the full catalog with a paragraph and a feature list per product
 *   (<ProductList>); services that are not products (<FeatureCards>).
 * Children: <Product> tags, two to four.
 * Layout: without `columns` the cards share the row equally; set `columns` 2–4
 *   when there are more cards than fit one row.
 */
interface Props {
  /** anchor of the section, e.g. "models" */
  id?: string;
  /** short uppercase line above the title */
  kicker?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** cards per row on desktop; by default all cards share one row */
  columns?: 2 | 3 | 4;
}
const { id, kicker, title, description, columns } = Astro.props;
const cols = columns ? { 2: 'lg:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-2 lg:grid-cols-4' }[columns] : undefined;
---

<div id={id} class="relative bg-gray-900">
  <div class="px-4 pt-12 sm:px-6 lg:px-8 lg:pt-20">
    <div class="mx-auto max-w-4xl text-center">
      {kicker && <p class="text-base font-semibold uppercase leading-6 tracking-wider text-gray-300">{kicker}</p>}
      {title && <h2 class="mt-2 text-3xl font-extrabold text-white sm:text-4xl">{title}</h2>}
      {description && <p class="mx-auto mt-3 max-w-4xl text-xl text-gray-300 sm:mt-5">{description}</p>}
    </div>
  </div>
  <div class="mt-16 bg-white pb-8 lg:mt-20 lg:pb-16">
    <div class="relative z-0">
      <div class="absolute inset-0 h-5/6 bg-gray-900 lg:h-2/3"></div>
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class:list={['relative grid gap-8', cols ?? 'lg:grid-flow-col lg:gap-16']} data-variant="cards">
          <slot />
        </div>
      </div>
    </div>
  </div>
</div>