Product Blocks

Product block templates for subscription and purchase selection screens. Each template includes two products (yearly and monthly) with automatic select-product state handling.

All Product Block templates support:

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.

Features:

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

Use for:

Multiple subscription tier comparison
Promotional offer showcases
Plan browsing with detailed cards