- Select Product action — automatically linked to each product container
- Default/Selected states — visual feedback when user selects a product
- Product variables — price, period, and other dynamic data
Single Product
A single product card — use as a building block or for single-option screens.
Column Simple 1
Vertical list layout with title on the left, price on the right, and optional badge overlay.
Column Simple 2
Vertical list with centered content and period labels.
Column Simple 3
Compact vertical cards with checkbox selection indicators.
Column Complex 1
Full-featured card with savings calculations, trial info, and detailed pricing.
Column Complex 2
Rich cards with multiple data points and comparison-friendly layout.
Tile 1
Side-by-side cards with radio selection indicators.
Tile 2
Compact horizontal tiles with centered content.
Tile 3
Rich horizontal tiles with badges and descriptions.
With Features 1
Product card with icon-based feature list and optional promotional offer.
With Features 2
Detailed comparison cards with comprehensive feature breakdowns.
Product Slider
A horizontal carousel of product cards with optional badges, pricing, descriptions, and CTA buttons. Ideal for showcasing multiple subscription options in a swipeable format.
- Swipeable product cards
- Optional “Best Value” or promotional badges
- Price and description display
- CTA button per product
- Automatic select-product state handling
- Autoplay with configurable timing
- Multiple subscription tier comparison
- Promotional offer showcases
- Plan browsing with detailed cards
Components Social Proof