Pricing Plan

Figma
A pricing card component displaying subscription plan details with strikethrough pricing for discounts.

Overview

Enables potential customers to understand and compare subscription options through a clear card layout. Display individual tiers with respective pricing, show discounted annual pricing with strikethrough formatting, and present included features with checkmarks and excluded features with visual indicators. Supports transparent pricing presentation without hidden costs to strengthen customer confidence.

Key Business & UX Benefits

  • One card for plan details and pricing so comparison is clear.
  • Strikethrough and feature lists support annual discounts and inclusions.
  • Localized pricing and CTA keep the card on-brand and actionable.
  • Transparent presentation builds trust and reduces support.
Pro-Tip from Larry: Use Pricing Plan cards so customers can compare tiers at a glance.

Usage

LuiPricingCard

Feature List

  • Strikethrough pricing for annual billing discounts
  • Included and excluded feature lists with icon indicators
  • Localized money formatting with I18nMoney
  • CTA button with customizable text and link

API Reference

No component metadata found for PricingCard. Did you mean LuiPricingCard?