Pricing Table

The pricing table section displays pricing tiers with features comparison. It supports two layout options: cards for a traditional side-by-side card layout, and comparison for a feature comparison table format.

Configuration

- sectionType: pricing-table
  containerTag: aside
  text:
    title: 'Choose Your Plan'
    prose: 'Select the plan that best fits your needs.'
  tiers:
    source: 'pricing-example'     # Loads from lib/data/pricing/pricing-example.json
    layout: 'cards'               # Options: cards, comparison

Configuration Options

Layout Options

PropertyTypeRequiredDescription
tiers.layoutstringYesLayout type ('cards', 'comparison')
tiers.sourcestringYesData file name in lib/data/pricing/ directory

Content

PropertyTypeRequiredDescription
textobjectNoOptional intro text with title, subtitle, and prose

Tier Data Structure

Each tier in the data file should follow this structure:

{
  "name": "Professional",
  "description": "Best for growing teams",
  "icon": "award",
  "isFeatured": true,
  "featuredLabel": "Most Popular",
  "price": {
    "prefix": "$",
    "amount": "29",
    "suffix": "/month"
  },
  "features": [
    { "text": "Unlimited projects" },
    { "text": "API access", "isExcluded": true },
    { "text": "Storage", "value": "10 GB" }
  ],
  "ctas": [
    {
      "url": "/signup",
      "label": "Get Started",
      "isButton": true,
      "buttonStyle": "primary"
    }
  ]
}