SaaS
Pricing Plans
A responsive pricing grid arranging plan cards side-by-side on desktop with mobile swipe carousel.
Overview
Provides a responsive container for displaying multiple subscription plans in an easily comparable format. Display three or more pricing tiers in a horizontal grid on desktop for easy side-by-side comparison. On mobile, present cards as a swipeable slider with engaging coverflow animation effects. Synchronizes with billing cycle switches to update all cards simultaneously.
Key Business & UX Benefits
- One section for multiple pricing cards so comparison is easy.
- Grid on desktop and slider on mobile fit different viewports.
- Billing cycle sync keeps all cards in sync when toggling monthly/annual.
- Navigation bullets and coverflow keep the slider usable.
Pro-Tip from Larry: Use Pricing Plans with a billing cycle switch so cards update together.
Usage
LuiPricingGrid
Feature List
- Side-by-side grid layout for comparing multiple pricing tiers
- Mobile swipe carousel with coverflow animation effects
- Navigation bullets for slide indication and direct navigation
- Responsive breakpoint handling between grid and slider modes
API Reference
No component metadata found for PricingGrid. Did you mean
LuiPricingGrid?