PricingCards

Props

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

---
/**
 * PricingCards — plans side by side, one <Plan> card per column, under a
 *   left-aligned heading.
 *
 * Use for: a price list with two to four tariffs to choose from.
 * Not for: one rate only (<PricingSingle>); one plan that needs a long feature
 *   list (<PricingWide>); a price as a prompt for the next step (<CtaPrice>).
 * Children: <Plan> tags, two to four; mark one `recommended` to highlight it.
 * Layout: `columns` 2–4 (default 3). Default id is "pricing", so links can
 *   point at "/#pricing".
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section (default "pricing") */
  id?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** cards per row on desktop */
  columns?: 2 | 3 | 4;
  /** background of the section */
  theme?: Theme;
}
const { id = 'pricing', title, description, columns = 3, theme = 'light' } = Astro.props;
const cols = { 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-2 xl:grid-cols-4' }[columns];
---

<Section id={id} title={title} description={description} theme={theme} heading="left">
  <div class:list={['grid grid-cols-1 gap-8', cols]} data-variant="cards">
    <slot />
  </div>
</Section>