# Pricing Columns

> Plans side by side as cards, with the featured plan inverted onto ink.

- **Slug:** `pricing-columns`
- **Kind:** section · **Category:** Pricing
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/ui/components/pricing-columns
- **All files in one bundle:** https://viewership.ai/ui/components/pricing-columns.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/pricing-columns.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/pricing-columns/`:

   - `PricingColumns.astro` (raw: https://viewership.ai/ui/raw/pricing-columns/PricingColumns.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/ui/components/button.md)
   - `icon`: `Icon.astro`, `icons.ts` (docs: https://viewership.ai/ui/components/icon.md)

npm packages: none.

## Usage

```astro
---
import PricingColumns from "../components/viewership/pricing-columns/PricingColumns.astro";
---

<PricingColumns />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import PricingColumns from "./PricingColumns.astro";
---

<PricingColumns
  title="Repair plans,"
  accent="priced plainly."
  intro="Sample prices for a fictional gear brand."
  note="Sample figures for demonstration."
  tiers={[
    {
      name: "Trail",
      price: "$180",
      period: "per pack",
      description: "A single repair or refit, done at the bench.",
      features: ["Stitching and seam tape", "Zip and buckle swaps", "Return shipping included"],
      cta: { label: "Book a repair", href: "#" },
    },
    {
      name: "Season",
      price: "$420",
      period: "per year",
      description: "Unlimited repairs and a yearly tune-up for the whole kit.",
      features: ["Unlimited repairs", "Annual waterproofing", "Loaner pack while we work", "Priority bench slot"],
      cta: { label: "Join for a season", href: "#" },
      featured: true,
      badge: "Most chosen",
    },
    {
      name: "Expedition",
      price: "By quote",
      description: "Guides, schools and teams outfitting twelve or more people.",
      features: ["Fleet maintenance plan", "On-site repair days", "Custom colourways"],
      cta: { label: "Request a quote", href: "#" },
    },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `intro` | `string` |  | Supporting paragraph. |
| `tiers` | `{ name: string; price: string; period?: string; description?: string; features: string[]; cta: { label; href }; featured?: boolean; badge?: string }[]` |  | Plans. Two to four fit a row. |
| `note` | `string` |  | Small print under the plans. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/pricing-columns/PricingColumns.astro`

```astro
---
/**
 * PricingColumns: plans side by side, the featured one inverted onto ink.
 * Prices are plain strings, so "$420", "From $9k" or "By quote" all work.
 *
 * @example
 * <PricingColumns title="Repair plans," accent="priced plainly." tiers={[
 *   { name: "Trail", price: "$180", period: "per pack", features: ["Stitching"], cta: { label: "Book", href: "/book" } },
 * ]} />
 */
import Button from "../button/Button.astro";
import Icon from "../icon/Icon.astro";

interface Cta {
  label: string;
  href: string;
}
interface Tier {
  name: string;
  price: string;
  period?: string;
  description?: string;
  features: string[];
  cta: Cta;
  featured?: boolean;
  /** Small label on the plan, e.g. "Most chosen". */
  badge?: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  tiers: Tier[];
  /** Small print under the plans. */
  note?: string;
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, tiers, note, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-pricing-columns", className]}>
  <div class="vs-pricing-columns__inner">
    <header class="vs-pricing-columns__head">
      <Heading class="vs-display vs-pricing-columns__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-pricing-columns__intro">{intro}</p>}
    </header>
    <ul class="vs-pricing-columns__tiers">
      {
        tiers.map((t) => (
          <li class:list={["vs-pricing-columns__tier", { "is-featured": t.featured }]}>
            <div>
              <h3 class="vs-pricing-columns__name">
                {t.name}
                {t.badge && <span class="vs-pricing-columns__badge">{t.badge}</span>}
              </h3>
              {t.description && <p class="vs-pricing-columns__desc">{t.description}</p>}
            </div>
            <div class="vs-pricing-columns__buy">
              <p class="vs-display vs-pricing-columns__price">{t.price}</p>
              {t.period && <p class="vs-pricing-columns__period">{t.period}</p>}
              <div class="vs-pricing-columns__action">
                <Button href={t.cta.href} variant={t.featured ? "accent" : "secondary"}>{t.cta.label}</Button>
              </div>
            </div>
            <ul class="vs-pricing-columns__features">
              {t.features.map((f) => (
                <li>
                  <Icon name="check" size={16} strokeWidth={2.25} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </li>
        ))
      }
    </ul>
    {note && <p class="vs-pricing-columns__note">{note}</p>}
  </div>
</section>

<style>
  .vs-pricing-columns {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-pricing-columns__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-pricing-columns__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-pricing-columns__intro {
    max-width: 34rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-pricing-columns__tiers {
    display: grid;
    gap: 16px;
    margin: clamp(28px, 5cqi, 56px) 0 0;
    padding: 0;
    list-style: none;
  }
  @container (min-width: 760px) {
    .vs-pricing-columns__tiers {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
  .vs-pricing-columns__tier {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-sm);
  }
  .vs-pricing-columns__name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }
  .vs-pricing-columns__badge {
    padding: 3px 9px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-accent);
    color: var(--vs-on-accent);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .vs-pricing-columns__desc {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--vs-ink-2);
  }
  .vs-pricing-columns__buy {
    padding-bottom: 24px;
    border-bottom: var(--vs-border-w) solid var(--vs-line);
  }
  .vs-pricing-columns__price {
    font-size: clamp(2.25rem, 5cqi, 3.25rem);
    line-height: 1;
  }
  .vs-pricing-columns__period {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }
  .vs-pricing-columns__action {
    margin-top: 20px;
  }
  .vs-pricing-columns__action :global(.vs-button) {
    width: 100%;
  }
  .vs-pricing-columns__features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .vs-pricing-columns__features li {
    display: flex;
    gap: 10px;
    line-height: 1.4;
  }
  .vs-pricing-columns__features :global(.vs-icon) {
    margin-top: 2px;
    color: var(--vs-accent-ink);
  }
  .vs-pricing-columns__note {
    margin: 24px 0 0;
    font-size: 0.8125rem;
    color: var(--vs-ink-3);
  }

  /* Featured plan: inverted onto ink */
  .vs-pricing-columns__tier.is-featured {
    border-color: var(--vs-ink);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    box-shadow: var(--vs-pop-shadow, var(--vs-shadow-md));
  }
  .is-featured .vs-pricing-columns__desc,
  .is-featured .vs-pricing-columns__period {
    color: color-mix(in srgb, var(--vs-ink-inverse) 70%, transparent);
  }
  .is-featured .vs-pricing-columns__buy {
    border-color: color-mix(in srgb, var(--vs-ink-inverse) 22%, transparent);
  }
  .is-featured .vs-pricing-columns__features :global(.vs-icon) {
    color: var(--vs-accent);
  }
</style>
```