C-011ComponentFree

Adaptive Theme Pricing Cards

Editorial pricing tiers that adapt to the site theme: section > container > header (eyebrow, h2, intro) > a row of "Adaptive Tier" component instances, each with an optional glyph, plan name, badge, tagline, price (curre…

Get it free

Included in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Adaptive Theme 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: Component
Category: Cards
Responsive: Desktop to phone
Works with: Etch, ACSS, plain CSS

Options 11

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

data-theme

lightdarkauto

on the section

data-accent

primarysecondaryaccentneutral

picks which ACSS colour drives badges, checks and CTAs

data-surface

joinedseparateelevatedoutline

joined draws every tier inside one hairline frame, the others split them into cards

data-radius

nonesmlxl

outer corner radius

data-columns

auto234

tiers per row on wide containers (auto fits by width)

data-align

startcenter

header alignment

data-density

compactcomfortableairy

inner tier spacing

data-anim

risefadenone

data-duration

number

data-stagger

number

data-once

truefalse

entrance motion when the row scrolls into view

Component props 1

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

Adaptive Tier3 in this pattern · 26 props

PropTypeDefault

glyph

text

stack

name

text

Studio

headingLevel

text

showBadge

true / false

False

badge

text

Most chosen

badgeTone

text

accent

showBadgeDot

true / false

True

tagline

text

For small teams shipping every week.

currency

text

price

text

period

text

per month

showDescription

true / false

True

description

text

Everything in Solo, plus shared libraries and review links for client…

feature1

text

Five editor seats

feature2

text

Shared component library

feature3

text

Client review links

feature4

text

Version history, 90 days

feature5

text

empty

feature6

text

empty

featured

true / false

False

showCta

true / false

True

ctaLabel

text

Choose Studio

ctaUrl

text

#studio

ctaStyle

text

outline

showNote

true / false

False

note

text

No card needed for the first 14 days.

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

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

All patterns

Free