Skip to content
L-014Layout

Pricing Bento

Pricing expressed as a bento grid, built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro, billing toggle) > a grid holding three "Plan Cell" component instances (the middle one feat…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Pricing Bento 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
Bento grids
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 1

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

data-billing
monthlyyearly

on the grid wrapper

Component props 2

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

Plan Cell3 in this pattern · 12 props
PropTypeDefault
name
text

Studio

tagline
text

For small, fast-moving teams

priceMonthly
text

39

priceYearly
text

29

period
text

/mo

featured
true / false

False

feature1
text

Unlimited projects

feature2
text

Up to 10 seats

feature3
text

Priority support

feature4
text

empty

ctaLabel
text

Start free trial

ctaHref
text

#start

Add-on Cell3 in this pattern · 4 props
PropTypeDefault
name
text

Extra seats

price
text

9

unit
text

/seat/mo

description
text

Add teammates any time, billed pro-rata.

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

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan