Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageAuto-Calculating Pricing Cards
Pricing section where you type one monthly price per plan and everything else is worked out live: section > container > header (eyebrow, h2, intro) > a control console (Monthly/Yearly segmented switch with a savings pill…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Auto-Calculating Pricing Cards 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
- Grids and cards
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 10
Set on the section, in Etch’s attributes panel. No code needed.
data-themedata-accentcolour of switch, slider, featured ring and savings
data-billingstarting billing period
data-show-seatshide the seat slider for flat pricing pages
data-surfaceplan card surface
data-radiusdata-columnsplans per row on wide containers
data-alignheader alignment
data-animnumbers count to the new value
data-durationms · count length
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
nameTeam
headingLevelh3
showTaglineTrue
taglineFor product teams shipping every week.
pricingseat
currency$
priceMonthly19
yearlyDiscountPercent20
unitLabelper seat / month
customLabelLet us quote
featuredFalse
showBadgeFalse
badgeBest value
badgeToneaccent
showBadgeIconTrue
showReceiptTrue
f1Unlimited projects
f1onTrue
f2Shared design library
f2onTrue
f3Review links for clients
f3onTrue
f4Single sign-on
f4onFalse
f5empty
f5onTrue
showCtaTrue
ctaLabelStart 14-day trial
ctaUrl#team
ctaStyleoutline
showNoteFalse
noteCancel any time from your account.
Included in Pro From €39 a year, with all 469 patterns.
Get ProMore patterns
