Data & display

AppPricingCard

A pricing tier — name, price, pitch, feature list and call to action.

<app-pricing-card name="Pro" price="₹1,499" unit="/month">…</app-pricing-card>

<app-pricing-card> presents one tier: what it is called, what it costs, who it is for, what it includes, and the button that takes it. Used on a marketing pricing page and on the in-app plan/upgrade screen.

The “Most popular” flag is a real element with real text, not a content: string welded into CSS — so it can be reworded, translated, and read by a screen reader.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the card above it.

Pro
₹1,499/month
For growing teams that report regularly.
  • Unlimited reports
  • 25 sites
  • Single sign-on
<app-pricing-card name="Pro" price="₹1,499" unit="/month" tagline="For growing teams that report regularly.">
    <app-plan-feature text="Unlimited reports" />
    <app-plan-feature text="25 sites" />
    <app-plan-feature text="Single sign-on" included="true" />
    <app-plan-cta><app-button variant="secondary" block="true">Choose Pro</app-button></app-plan-cta>
</app-pricing-card>

Basic

A name, a formatted price, an optional unit, a one-line pitch, the features, and a CTA. The price is pre-formatted — the tag helper does not know your currency.

One tier
Put an <app-button> inside <app-plan-cta>; it is pushed to the bottom edge so buttons line up across a row.
Pro
₹1,499/month
For growing teams that report regularly.
  • Unlimited reports
  • 25 sites
  • Report revisions
  • Single sign-on
Show code 
<app-pricing-card name="Pro" price="₹1,499" unit="/month" tagline="For growing teams.">
    <app-plan-feature text="Unlimited reports" />
    <app-plan-feature text="Single sign-on" included="false" />
    <app-plan-cta><app-button variant="primary" block="true">Choose Pro</app-button></app-plan-cta>
</app-pricing-card>

A row of tiers

Wrap the cards in .plan-grid: one column on a phone, two from md, three from lg — with vertical room for the featured card's 2% lift, so it never clips against its neighbours.

Three tiers
Every card lists the SAME features in the same order. That is what lets the reader read across a row and compare.
Free
₹0
For trying things out.
  • 3 reports per month
  • 1 site
  • Report revisions
  • Single sign-on
Most popular
Pro
₹1,499/month
For growing teams that report regularly.
  • Unlimited reports
  • 25 sites
  • Report revisions
  • Single sign-on
Enterprise
Talk to us
For organisations with SSO and custom terms.
  • Unlimited reports
  • Unlimited sites
  • Report revisions
  • Single sign-on
Show code 
<div class="plan-grid">
    <app-pricing-card name="Free" price="₹0" … />
    <app-pricing-card name="Pro" price="₹1,499" unit="/month" featured="true" … />
    <app-pricing-card name="Enterprise" price="Talk to us" … />
</div>
Never omit a feature a tier lacksMark it included="false" instead. A shorter list just looks like a shorter card; rows that line up are the only thing that makes the tiers comparable at a glance.

When to use

Use it when

  • You are presenting purchasable tiers with prices and actions.
  • The reader is choosing which one to take.
  • Each tier has a short feature list that fits on a card.

Reach for something else when

  • You need the full capability matrix. → app-compare-table, below the cards
  • It is a selectable option in a form, not a purchase. → app-choice-card
  • It is a link to a doc or template. → app-resource-card

Best practices

Do
Pro
₹1,499/month
For growing teams.
  • Unlimited reports
  • SSO
A unit so the price is unambiguous, a tagline saying who it is for, excluded features kept in the list, and a CTA naming the tier.
Don't
Pro
1499
  • Unlimited reports
“1499” — of what, per what? No tagline, the excluded feature dropped so rows no longer align, and “Click here” tells the reader nothing about what they are committing to.

Every option

The whole surface of the component, one cell per value — every featured/current combination, the badge edge cases, included vs excluded features, and where React and Razor genuinely differ.

featured / current — all four combinations

(default) — neither
Basic
₹0
  • Core features
featured
Most popular
Pro
₹1,499
  • Everything in Basic
current
Free
₹0
  • Your plan today
featured + current
Most popular
Pro
₹1,499
  • Already on this tier

badge

featured (default badge text)
Most popular
Pro
₹1,499
featured badge="Recommended"
Recommended
Pro
₹1,499
featured badge="" — badge hidden
Pro
₹1,499
badge="Best value" but not featured — badge hidden
Pro
₹1,499

price / unit

price + unit
Pro
₹1,499/month
price only — no unit
Pro
₹1,499
price="Talk to us" — non-numeric text
Enterprise
Talk to us
price is a plain string here (Razor: no ReactNode)
Pro
₹1,499 incl. GST
price accepts a node in React, a string in RazorReact's price is typed as ReactNode, so a caller can compose it (e.g. a smaller "incl. GST" suffix inline). Razor's price attribute is a plain string — pre-format the whole thing before passing it in.

features — included, excluded, mixed, empty

all included
Pro
₹1,499
  • Unlimited reports
  • 25 sites
  • SSO
all excluded
Free
₹0
  • Unlimited reports
  • 25 sites
  • SSO
mixed included / excluded
Pro
₹1,499
  • Unlimited reports
  • 25 sites
  • SSO
no app-plan-feature children — no list rendered
Pro
₹1,499

cta

app-plan-cta present
Pro
₹1,499
app-plan-cta omitted — no plan-cta wrapper
Pro
₹1,499

class passthrough

class="analytics-card" — appended alongside base classes
Most popular
Pro
₹1,499

long content overflow

long name, tagline, and feature text stay inside the card
Enterprise Unlimited Everything Plan
₹49,999/month, billed annually
For very large organisations that need dedicated infrastructure, custom SLAs, and a named account manager who actually answers the phone.
  • Unlimited reports, revisions, and export formats across every workspace
  • Single sign-on with SCIM provisioning and custom identity providers

Attributes

AttributeTypeDefaultDescription
name *string—Tier name.
price *string—Formatted amount, or text like “Talk to us”. React's price accepts a ReactNode; here it is a plain string — pre-format it.
unitstring—Period suffix, e.g. /month.
taglinestring—One line on who the tier is for.
featuredboolfalseThe recommended tier: brand border, lifted, badged. Use on one card.
currentboolfalseThe tier the customer is already on — a ring, no lift.
badgestringMost popularText of the featured flag.

<app-plan-feature> takes text and included. <app-plan-cta> wraps the action.