Build

Pricing & switchers

Pricing cards and comparison tables, and the monthly/yearly toggle that changes every figure at once.

Three widgets cover pricing, and one mechanism ties them together.

Widget	For
NovaKit Pricing Card	One plan, as a card. Put three in a row for the usual layout.
NovaKit Pricing Table	Several plans compared feature by feature, in one grid.
NovaKit Price	Just a figure. For a hero, a banner, anywhere a price stands alone.

The monthly / yearly switcher #

This is the part worth understanding, because it does not work the way you would guess.

The toggle is NovaKit Tabs / Switcher with its Nav Style set to Switch. It does not contain the prices. Instead it broadcasts which state is active, and any pricing widget that names the same Switch Group listens and changes its own figure.

Why broadcast rather than contain? Because in every real pricing layout the toggle sits above a row of cards, or inside each card — never wrapped around them. A mechanism based on containment would force you to restructure your columns just to use the feature.

Add the toggleAn NovaKit Tabs / Switcher above your pricing row, with Nav Style set to Switch.
Name the groupGive it a Switch Group name — billing, say. Any name, as long as it is the same everywhere.
Label the two states“Monthly” and “Yearly”, as the two items.
Set the same group on each priceIn every NovaKit Price, Pricing Card or Pricing Table, enter that same Switch Group.
Give each its second figureEach price then takes a second value for the other state — the yearly figure beside the monthly one.

The group name must match exactly, and a widget that does not name it is simply not listening — the toggle flips, and that one price sits unchanged. Nothing errors, because a switcher cannot know which widgets were meant to follow it.

One toggle can drive any number of widgets, and a page can carry more than one independent toggle by giving each its own group name.

How the change animates

NovaKit Price offers a Switch Motion for the transition rather than swapping the number instantly:

Setting	Default	Accepts
Price Motion	—	The animation used when the figure changes
Duration	—	Seconds
Slide Distance	—	How far each digit travels
Digit Stagger	—	Milliseconds between digits, so they roll rather than move as a block
Roll Direction	—	Up or down

The stagger is what makes it read as an odometer rather than a jump cut. A small value — tens of milliseconds — is enough.

The comparison table #

NovaKit Pricing Table puts several plans side by side and compares them row by row. You define the plans as columns and the features as rows.

Setting	Default	Accepts
Number of Plans	—	How many columns
Sticky Plan Header	Off	On or off
Sticky Offset	—	Pixels, to clear a sticky site header
Alternating Row Tint	—	On or off
Corner Label	—	Text for the empty top-left cell
Included / Not-Included Icon	—	The tick and cross used in feature rows

Turn on Sticky Plan Header for any table longer than a screen. Otherwise a visitor scrolling the feature list loses track of which column is which — and set the Sticky Offset to your header’s height, or it pins underneath it.

Row types

Feature rows come in more than one kind. A Group row is a heading that spans the table, letting you break a long list into sections — “Included”, “Support”, “Limits”. Ordinary rows take a tick, a cross, or free text such as “Up to 5” per plan.

Each plan column carries its own name, price, period, button text, link and style, so one column can be visually promoted as the recommended plan.

Pricing cards #

NovaKit Pricing Card is one plan. Three in a horizontal Container gives the familiar layout, and because each is a separate widget you can make the middle one taller, tint it, or add a badge without fighting a table.

Cards subscribe to the switcher the same way — give each the same Switch Group.

When the toggle does nothing #

Symptom	Usual cause
Nothing changes anywhere	Nav Style is not set to Switch, or the switcher has no group name.
Some prices change, one does not	That widget’s Switch Group is missing or spelled differently.
The figure changes but the period does not	Only the price has a second value. The period takes one too.
Two toggles move together	They share a group name. Give each its own.
It works on the page but not in the editor	Expected — the broadcast runs on the real page. Use Preview.