L-263LayoutFree

Billing Toggle Pricing

A Monthly/Yearly segmented toggle that switches every plan card's price at once. Plan Card component props: name, popular (shows a Most Popular badge and turns the CTA primary), monthlyPrice, yearlyMonthlyPrice, feature…

Get it free

Included in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

All photos and visual assets used in this preview are sourced from Unsplash.

The system behind it

One pattern, your whole brand.

Billing Toggle Pricing reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type: Layout
Category: Pricing
Responsive: Desktop to phone
Works with: Bricks, ACSS, plain CSS

Options 2

Set on the section, in Bricks’ attributes panel. No code needed.

data-theme

lightdark

section surface

data-billing

monthlyyearly

default selected cycle

Component props 1

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Plan Card3 in this pattern · 12 props

PropTypeDefault

name

text

Starter

popular

true / false

False

monthlyPrice

number

yearlyMonthlyPrice

number

feature1

text

Up to 3 active projects

feature2

text

5 GB of file storage

feature3

text

Email support within 48 hours

feature4

text

Standard analytics dashboard

showFeature5

true / false

False

feature5

text

empty

ctaLabel

text

Start Now

ctaHref

text

Free pattern. Yours to use on any site, no plan needed.

Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.

Get Pro

More patterns

Keep browsing.

All patterns

Free