Pricing

Sections pricing

Pricing tiers with a CTA each.

Markup

Drops in as data-pb-block="pricing".

html

<section data-pb-block="pricing" class="pb-pricing" style="padding:4rem 1.5rem;">
  <h2 class="pb-pricing__title" style="text-align:center;font-size:2rem;margin:0 0 2.5rem;">Pricing</h2>
  <div class="pb-pricing__grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:60rem;margin:0 auto;">
    <div class="pb-pricing__plan" style="padding:2rem;border:1px solid #e2e8f0;border-radius:0.75rem;text-align:center;"><h3 style="margin:0 0 0.5rem;">Starter</h3><p style="font-size:2rem;font-weight:700;margin:0 0 1rem;">$9<span style="font-size:1rem;color:#64748b;">/mo</span></p><a href="#" style="display:inline-block;padding:0.6rem 1.25rem;border-radius:0.5rem;background:#4f46e5;color:#fff;text-decoration:none;">Choose</a></div>
    <div class="pb-pricing__plan" style="padding:2rem;border:2px solid #4f46e5;border-radius:0.75rem;text-align:center;"><h3 style="margin:0 0 0.5rem;">Pro</h3><p style="font-size:2rem;font-weight:700;margin:0 0 1rem;">$29<span style="font-size:1rem;color:#64748b;">/mo</span></p><a href="#" style="display:inline-block;padding:0.6rem 1.25rem;border-radius:0.5rem;background:#4f46e5;color:#fff;text-decoration:none;">Choose</a></div>
    <div class="pb-pricing__plan" style="padding:2rem;border:1px solid #e2e8f0;border-radius:0.75rem;text-align:center;"><h3 style="margin:0 0 0.5rem;">Business</h3><p style="font-size:2rem;font-weight:700;margin:0 0 1rem;">$99<span style="font-size:1rem;color:#64748b;">/mo</span></p><a href="#" style="display:inline-block;padding:0.6rem 1.25rem;border-radius:0.5rem;background:#4f46e5;color:#fff;text-decoration:none;">Choose</a></div>
  </div>
</section>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="pricing" so it imports as a labelled, editable component.