PricingWide
apps/www/src/sections/PricingWide.astro · 33 lines · group Pricing
PricingWide — one wide <Plan>: what is included on the left (the features in two columns), the price and the button on the right. Use for: a single offer with a long list of what is included — a membership, a support package, an all-inclusive rate. Not for: several tariffs (<PricingCards>); a compact single rate (<PricingSingle>). Children: exactly one <Plan>.
In the fleet
Not used by any site yet.
Samples 1
The full season, one line
Season pass
Everything a grower needs from the first frost to the last harvest.
Included
- Stations and gateway
- Replacements within 48 hours
- Forecasts and alerts
- Exports and API
MDX of this sample
<PricingWide title="The full season, one line">
<Plan
name="Season pass"
description="Everything a grower needs from the first frost to the last harvest."
featuresTitle="Included"
features={['Stations and gateway', 'Replacements within 48 hours', 'Forecasts and alerts', 'Exports and API']}
price="€349"
priceNote="per season"
linkText="How we bill"
href="/pricing/"
primaryText="Start the season"
primaryHref="/trial/"
cta="primary"
/>
</PricingWide>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | 'pricing' | anchor of the section (default "pricing") | |
| title | string | the section heading | ||
| description | string | a paragraph under the heading | ||
| theme | 'light' | 'muted' | 'dark' | 'brand' | 'brand-dark' | 'light' | background of the section |
Source apps/www/src/sections/PricingWide.astro @ gitt.one
---
/**
* PricingWide — one wide <Plan>: what is included on the left (the features in
* two columns), the price and the button on the right.
*
* Use for: a single offer with a long list of what is included — a membership,
* a support package, an all-inclusive rate.
* Not for: several tariffs (<PricingCards>); a compact single rate
* (<PricingSingle>).
* Children: exactly one <Plan>.
*/
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;
/** background of the section */
theme?: Theme;
}
const { id = 'pricing', title, description, theme = 'light' } = Astro.props;
---
<Section id={id} title={title} description={description} theme={theme} heading="left">
<div class="mx-auto grid max-w-5xl grid-cols-1 gap-8" data-variant="wide">
<slot />
</div>
</Section>Source links point to engine-astro@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.