Skip to content

Effect 20 Pricing

Responsive pricing tables — one card per plan with an accent color for the recommended plan, plus an optional left-header comparison mode. Ideal for SaaS plans, memberships and service quotes.

Effect 20 Pricing preview

Live Demo

Visit the official demo page to see it in action.

Data Fields

FieldDescription
TitlePlan name (e.g. Basic / Pro / Enterprise)
DescriptionFeature list (rich text, one per line)
Price fieldsPrice, billing cycle, etc.
Link / button textBuy button URL and label

Item form (Field Manager) screenshot:

Effect 20 Pricing form

![Left-header comparison mode](/images/Effect_20_Pricing/Custom models.jpg)

Effect Settings

Layout & colors

ParameterDescription
Number of columnsNumber of columns per breakpoint (default 4/4/3/1)
Item SpacingSpacing between items in pixels (default 3)
Text alignmentText alignment (default center)
Accent colorAccent color (buttons, highlighted elements) (default #69b532) for the recommended plan
Display ShadowShow card shadows

Left Header Settings

ParameterDescription
Display Left HeaderEnable the left comparison header
Header Title / Price Text / Description Text / Buy Button TextRow labels of the header

TIP

This effect ships 4 themes (Themes).

Built with VitePress