Library · Content Sections

Content / Feature Comparison Table

Compare plans/options/competitors across features; boolean cells render an accessible tick/cross. Stacks into per-column cards on mobile (no horizontal body scroll). Tone via the shared contract.

Figma: Content / Feature Comparison Table ↗

Live preview — edit theme bottom-right

---
import ComparisonTable from "../components/figma/ComparisonTable.astro";
---
<ComparisonTable
  heading="Compare our packages"
  tone="base-100"
  columns={[
    { label: "Starter" },
    { label: "Growth", highlight: true },
    { label: "Enterprise" },
  ]}
  rows={[
    { feature: "Custom design", values: [true, true, true] },
    { feature: "Pages included", values: ["5", "12", "Unlimited"] },
    { feature: "Email marketing", values: [false, true, true] },
    { feature: "Dedicated manager", values: [false, false, true] },
    { feature: "Support", values: ["Email", "Priority", "24/7"] },
  ]}
/>

Props

Name	Type	Required	Description
`heading`	`string;`	—	Optional section heading
`columns`	`ComparisonColumn[];`	Yes	Column headers (the options being compared)
`rows`	`ComparisonRow[];`	Yes	Feature rows
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<ComparisonTable
  heading="Compare our packages"
  tone="base-100"
  columns={[{ label: "Starter" }, { label: "Growth", highlight: true }, { label: "Enterprise" }]}
  rows={[
    { feature: "Custom design", values: [true, true, true] },
    { feature: "Pages included", values: ["5", "12", "Unlimited"] },
  ]}
/>