Opens in a new tab

Pricing · Plan and add-ons

An add-ons pricing section for Bricks Builder with a checkbox form of extras, each showing its own price, beside a summary card with the base price and a running total that updates as options get checked. Built on the FBK Price and FBK Card components, so the plan, options and total stay editable from the panel.

Dark mode readyNeeds Code execution

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

In the annual plan, $99/year. See plans

Uses a small script. Turn on Code execution in Bricks › Settings › Custom code. How to turn on Code execution

Preview

Template details

What’s inside

The components it’s built from. They come with the template when you paste it, and you edit them from the Bricks panel.

  • FBK Card

    A media slot, title, text, a content slot and an actions slot.

  • FBK Intro

    Eyebrow, title, lead and an actions slot for buttons.

  • FBK Price

    A price: currency, a large figure, a period, an optional old price and a note.

Adjust it

Change these variables in Bricks to tune it; everything else follows your framework.

On the element Plan and add-ons, class fbk-wf-addons

Form card color: white like every Outline surface (dark or brand with the section's scheme)

--fbk-t-card-bg
var(--fbk-card-scheme-bg, var(--white))

An add-on row: its tint on hover and when ticked

--fbk-t-row-hover
color-mix(in srgb, currentColor 4%, transparent)
--fbk-t-row-on
color-mix(in srgb, currentColor 7%, transparent)