---
title: "Pricing Card Cascade — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Cards. Tiered pricing with cascade hierarchy."
canonical: "https://framer.elliotli.dev/component/pricing-card-cascade"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Pricing Card Cascade

# Pricing Card Cascade

Tiered pricing with cascade hierarchy.

[View on Framer](https://framer.com/marketplace/components/pricing-card-cascade/?via=elliot-li)

![Pricing Card Cascade preview image 1](https://framer.elliotli.dev/og/component/pricing-card-cascade/5174e243b5570e9e/1600x1200.jpg)

## Summary

Tiered pricing with cascade hierarchy.

## Description

## What is Pricing Cascade?

Pricing Cascade is a premium pricing table component that arranges plan cards in a distinctive staggered layout, creating natural visual hierarchy. Each card features animated price transitions, a segmented billing toggle, and a bold CTA-first structure with an editorial "Features" divider. Ideal for SaaS landing pages, agency sites, product launches, and any project where pricing needs to feel as refined as the product itself.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   **Staggered cascade layout** — Cards step down diagonally, drawing the eye from left to right and highlighting your recommended tier naturally.
    
-   **Animated billing toggle** — A segmented tab control switches between monthly and yearly pricing with smooth count-up price animations and a crossed-out original price.
    
-   **CTA-first card structure** — The call-to-action button sits above the feature list, following high-converting editorial pricing patterns.
    
-   **4 built-in themes + custom** — Dark, Light, Midnight, and Warm palettes ship ready to use. Switch to Custom for full control over every color.
    
-   **3 independent font controls** — Set separate typefaces for headings, body text, and prices to match your brand typography exactly.
    
-   **Featured card treatment** — Mark any plan as featured to activate an accent strip, ambient glow, gradient badge, and solid CTA — all configurable.
    

## Controls inside Framer

### Plans

-   Plan name, subtitle, monthly and yearly price, currency, and period label
    
-   Feature list (array of strings per plan)
    
-   CTA label and CTA link
    
-   Featured toggle with customisable badge text
    

### Essentials

-   Billing toggle (show/hide)
    
-   Theme (Dark, Light, Midnight, Warm, Custom)
    
-   Heading Font, Body Font, Price Font
    
-   Layout (Desktop, Tablet, Mobile)
    

### Custom Colors (visible when theme is Custom)

-   Background, Card BG, Text Primary, Text Secondary, Accent, Border
    

### Card Style

-   Corner radius
    
-   Stagger depth (vertical offset per card, set to 0 for flat)
    
-   Shadow intensity
    
-   Hover lift
    
-   Accent strip width
    
-   CTA style (Solid / Outline) with optional text color override
    

### Badge Style

-   Gradient start and end colors
    
-   Badge text color
    

### Animation

-   Staggered entrance with blur-in effect
    
-   Price count-up on billing toggle
    
-   Animation speed (Slow, Normal, Fast)
    

## Best use cases

-   **SaaS pricing pages** — Present tiered plans with visual hierarchy that guides visitors toward your target plan.
    
-   **Agency and studio sites** — Showcase service packages with the editorial polish clients expect.
    
-   **Product launches** — Highlight introductory pricing with animated transitions that create urgency and focus.
    
-   **Membership platforms** — Display membership tiers with clear feature differentiation and prominent CTAs.
    

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #11284

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-04-24
- **Updated**: 2026-06-13
- **Added**: 2026-04-17
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator