PricingCards

apps/www/src/sections/PricingCards.astro · 25 lines · group Pricing

PricingCards — plans side by side, one <Plan> per column. `recommended` on a plan highlights its card.

In the fleet

Not used by any site yet.

Samples 1

sample

What a season costs

Hardware included; cancel at the end of any season.

One field

A single station, the essentials.

One station
Air and soil sensors
SMS alerts

€19per month

Start

Estate

Co-op

Several farms behind one gateway.

Unlimited stations
Per-farm access
API and exports
Named support

€79per month

Talk to us

MDX of this sample

<PricingCards title="What a season costs" description="Hardware included; cancel at the end of any season.">
  <Plan name="One field" price="€19" priceNote="per month" description="A single station, the essentials." features={['One station', 'Air and soil sensors', 'SMS alerts']} primaryText="Start" />
  <Plan name="Estate" price="€39" priceNote="per month" recommended description="Up to ten stations and a gateway." features={['Ten stations', 'Leaf wetness and wind', 'Shared forecasts', 'Priority replacement']} primaryText="Start" />
  <Plan name="Co-op" price="€79" priceNote="per month" description="Several farms behind one gateway." features={['Unlimited stations', 'Per-farm access', 'API and exports', 'Named support']} primaryText="Talk to us" />
</PricingCards>

Props

Name	Type	Default
id	string	'pricing'
title	string
description	string
columns	2 \| 3 \| 4	3
theme	Theme	'light'

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

---
/**
 * PricingCards — plans side by side, one <Plan> per column. `recommended` on
 * a plan highlights its card.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  columns?: 2 | 3 | 4;
  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>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.