Pricing tier

One tier; shows the price for the table's billing choice.

Marketing

Pack defaults

With content

In context

Source

import { PricingTier } from "demo-landing/components";

const props = {
  "name": "Studio",
  "tagline": "For teams that plan together.",
  "priceMonthly": 12,
  "priceYearly": 10,
  "currency": "USD",
  "ctaLabel": "Start trial",
  "ctaHref": "/#signup",
  "popular": false,
  "feature1": "Shared team calendar",
  "feature2": "Focus time blocks",
  "feature3": "",
  "feature4": "",
  "feature5": "",
  "feature6": "",
  "order": 1
};
<PricingTier {...props} />

Live CSS

Injected into the previews above. Pricing tier

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */