PricingSingle

apps/www/src/sections/PricingSingle.astro · 23 lines · group Pricing

PricingSingle — a single rate on a muted band: one centered <Plan> with the price and one button. A price is pricing, not a call to action.

In the fleet

Used on 1 site built with this engine.

Samples 1

sample

Extra station

€12per month

Add a station

MDX of this sample

<PricingSingle>
  <Plan name="Extra station" price="€12" priceNote="per month" primaryText="Add a station" primaryHref="/stations/" cta="primary" />
</PricingSingle>

Props

Name	Type	Default
id	string	'pricing'
title	string
description	string
theme	Theme	'muted'

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

---
/**
 * PricingSingle — a single rate on a muted band: one centered <Plan> with the
 * price and one button. A price is pricing, not a call to action.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  theme?: Theme;
}
const { id = 'pricing', title, description, theme = 'muted' } = Astro.props;
---

<Section id={id} title={title} description={description} theme={theme} heading="left">
  <div class="mx-auto grid max-w-xl grid-cols-1 gap-8" data-variant="single">
    <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.