Pricing Controls

Pricing Controls sits above the pricing cards. On the left is a title with a tooltip; on the right is the switch between yearly and monthly payment.

The title is built from two parts: the Title and the Tooltip words, which follow it with a dotted underline and a ? icon. Hovering over the title shows the Tooltip text.

For example, Title Choose your and Tooltip words bookings per month read as “Choose your bookings per month”, with “bookings per month” underlined.

Each field has a Studios and a Sport centres version. The Sport centres fields are optional: when one is empty, the Studios text is used.

The payment interval switch

The switch has two options, Yearly label and Monthly label. An addition appears next to each label, for example -20% next to the yearly option.

Yearly is selected when a visitor first arrives.
The choice changes the price on every Pricing Card and Pricing Add-on Card, and the summary total.
The choice is remembered while the browser tab stays open.

Field reference

Field	Default	What it does
Title (Studios)	required	First part of the title.
Tooltip words (Studios)	empty	Underlined second part of the title.
Tooltip text (Studios)	empty	Text shown on hover.
Title (Sport centres), Tooltip words (Sport centres), Tooltip text (Sport centres)	empty	Replace the Studios texts when Sport centres is selected.
Yearly label	required	Text of the yearly option.
Yearly addition	empty	Small text next to the yearly option.
Monthly label	required	Text of the monthly option.
Monthly addition	empty	Small text next to the monthly option.
Background, Top Transition, Top Padding, Bottom Transition, Bottom Padding	Tiny padding	Section appearance, in the Section style group.