Search

Pricing Tiers

Pricing

Pick your bundle

Pay once, keep it forever. Every tier includes free updates.

Sale Launch price: 30% off until October 31

  • Book

    Read it at your own pace.

    Price: $39 Regular price: $49 one-time

    Buy the book: Book
    • The ebook (PDF, EPUB, Kindle)
    • Code samples and exercises
    • Not included: 64 video lessons (12 hours)
    • Not included: Source code for every lesson
    • Not included: Private community
    • Not included: Team license and invoice

  • Best value

    Complete

    The book and the video course.

    Price: $129 Regular price: $198 one-time

    Get the bundle: Complete
    • The ebook (PDF, EPUB, Kindle)
    • Code samples and exercises
    • 64 video lessons (12 hours)
    • Source code for every lesson
    • Private community
    • Not included: Team license and invoice

  • Team

    Everything for up to 10 people.

    Price: $499 Regular price: $690 one-time

    Buy for your team: Team
    • The ebook (PDF, EPUB, Kindle)
    • Code samples and exercises
    • 64 video lessons (12 hours)
    • Source code for every lesson
    • Private community
    • Team license and invoice

Prices in USD, VAT included where it applies. Student discount: 40% off with a school email.

@use 'sprucecss/scss/spruce' as *;

.pricing-tiers-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__deal {
    align-items: center;
    align-self: center;
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('pill');
    display: inline-flex;
    font-size: config('font-size-sm', $typography);
    font-weight: 600;
    gap: spacer('xs');
    margin-block: 0;
    padding: spacer('xxs') spacer('s') spacer('xxs') spacer('xxs');
  }

  &__tiers {
    align-items: start;
    display: grid;
    gap: spacer('m');
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
    }

    // The featured tier rises above the others (more specific than the reset above).
    > .pricing-tiers-block__tier--featured {
      @include breakpoint('md') {
        margin-block-start: calc(#{spacer('m')} * -1);
      }
    }
  }

  &__tier {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    box-shadow: shadow('sm');
    display: flex;
    flex-direction: column;
    gap: spacer('m');
    padding: spacer-clamp('m', 'l');
    position: relative;

    &--featured {
      border-color: color('primary');
      box-shadow: shadow('xl'), 0 0 0 1px color('primary');

      @include breakpoint('md') {
        padding-block: calc(#{spacer-clamp('m', 'l')} + #{spacer('s')});
      }
    }
  }

  &__header {
    @include layout-stack('xxs'); // name, description
  }

  &__badge {
    background-color: color('primary');
    border-radius: radius('pill');
    color: color('primary-foreground', 'btn');
    font-size: config('font-size-sm', $typography);
    font-weight: 700;
    inset-block-start: 0;
    inset-inline-end: spacer('m');
    margin: 0;
    padding: spacer('xxs') spacer('s');
    position: absolute;
    translate: 0 -50%;
  }

  &__name {
    font-size: font-size('h4');
  }

  &__description {
    color: color('muted');
  }

  &__price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xxs') spacer('xs');
    margin-block: 0;
  }

  &__amount {
    color: color('heading');
    font-family: config('font-family-heading', $typography);
    font-size: font-size('h1');
    font-weight: config('font-weight-heading', $typography);
    line-height: 1;
  }

  &__old {
    color: color('muted');
    font-size: font-size('h5');
  }

  &__period {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }

  &__features {
    border-block-start: config('border-width-base', $display) solid color('border');
    list-style: none;
    margin: 0;
    padding: spacer('m') 0 0;
    @include layout-stack('xs');
  }

  &__feature {
    align-items: flex-start;
    display: flex;
    gap: spacer('xs');

    &--excluded {
      color: color('muted');
      text-decoration: line-through;
      text-decoration-color: color-alpha('muted', 0.5);
    }
  }

  &__mark {
    block-size: 1rem;
    color: color('primary');
    flex-shrink: 0;
    inline-size: 1rem;
    margin-block-start: 0.3em;

    .pricing-tiers-block__feature--excluded & {
      color: color('muted');
    }
  }

  &__footer {
    display: flex;
    flex-direction: column;
    gap: spacer('s');
    margin-inline: auto;
    max-inline-size: 44rem;
    text-align: center;

    .guarantee {
      text-align: start;
    }
  }

  &__note {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin-block: 0;
  }
}
<section class="pricing-tiers-block" id="pricing" aria-labelledby="pricing-tiers-title">
    <div class="container">
        <div class="pricing-tiers-block__inner">
            <header class="block-heading">
                <p class="block-heading__eyebrow">Pricing</p>
                <h2 class="block-heading__title" id="pricing-tiers-title">Pick your bundle</h2>
                <p class="block-heading__text">Pay once, keep it forever. Every tier includes free updates.</p>
            </header>
            <p class="pricing-tiers-block__deal"><span class="badge badge--danger">Sale</span> Launch price: 30% off until October 31</p>
            <ul class="pricing-tiers-block__tiers" role="list">
                <li class="pricing-tiers-block__tier">
                    <div class="pricing-tiers-block__header">
                        <h3 class="pricing-tiers-block__name" id="tier-book">Book</h3>
                        <p class="pricing-tiers-block__description">Read it at your own pace.</p>
                    </div>
                    <p class="pricing-tiers-block__price">
                        <span class="pricing-tiers-block__amount"><span class="sr-only">Price: </span>$39</span>
                        <del class="pricing-tiers-block__old"><span class="sr-only">Regular price: </span>$49</del>
                        <span class="pricing-tiers-block__period">one-time</span>
                    </p>
                    <a class="btn btn--outline-primary btn--block" href="#">Buy the book<span class="sr-only">: Book</span></a>
                    <ul class="pricing-tiers-block__features" role="list">
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            The ebook (PDF, EPUB, Kindle)
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Code samples and exercises
                        </li>
                        <li class="pricing-tiers-block__feature pricing-tiers-block__feature--excluded">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 12h12"/></svg>
                            <span class="sr-only">Not included: </span>64 video lessons (12 hours)
                        </li>
                        <li class="pricing-tiers-block__feature pricing-tiers-block__feature--excluded">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 12h12"/></svg>
                            <span class="sr-only">Not included: </span>Source code for every lesson
                        </li>
                        <li class="pricing-tiers-block__feature pricing-tiers-block__feature--excluded">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 12h12"/></svg>
                            <span class="sr-only">Not included: </span>Private community
                        </li>
                        <li class="pricing-tiers-block__feature pricing-tiers-block__feature--excluded">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 12h12"/></svg>
                            <span class="sr-only">Not included: </span>Team license and invoice
                        </li>
                    </ul>
                </li>
                <li class="pricing-tiers-block__tier pricing-tiers-block__tier--featured">
                    <p class="pricing-tiers-block__badge">Best value</p>
                    <div class="pricing-tiers-block__header">
                        <h3 class="pricing-tiers-block__name" id="tier-complete">Complete</h3>
                        <p class="pricing-tiers-block__description">The book and the video course.</p>
                    </div>
                    <p class="pricing-tiers-block__price">
                        <span class="pricing-tiers-block__amount"><span class="sr-only">Price: </span>$129</span>
                        <del class="pricing-tiers-block__old"><span class="sr-only">Regular price: </span>$198</del>
                        <span class="pricing-tiers-block__period">one-time</span>
                    </p>
                    <a class="btn btn--primary btn--block" href="#">Get the bundle<span class="sr-only">: Complete</span></a>
                    <ul class="pricing-tiers-block__features" role="list">
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            The ebook (PDF, EPUB, Kindle)
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Code samples and exercises
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            64 video lessons (12 hours)
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Source code for every lesson
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Private community
                        </li>
                        <li class="pricing-tiers-block__feature pricing-tiers-block__feature--excluded">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 12h12"/></svg>
                            <span class="sr-only">Not included: </span>Team license and invoice
                        </li>
                    </ul>
                </li>
                <li class="pricing-tiers-block__tier">
                    <div class="pricing-tiers-block__header">
                        <h3 class="pricing-tiers-block__name" id="tier-team">Team</h3>
                        <p class="pricing-tiers-block__description">Everything for up to 10 people.</p>
                    </div>
                    <p class="pricing-tiers-block__price">
                        <span class="pricing-tiers-block__amount"><span class="sr-only">Price: </span>$499</span>
                        <del class="pricing-tiers-block__old"><span class="sr-only">Regular price: </span>$690</del>
                        <span class="pricing-tiers-block__period">one-time</span>
                    </p>
                    <a class="btn btn--outline-primary btn--block" href="#">Buy for your team<span class="sr-only">: Team</span></a>
                    <ul class="pricing-tiers-block__features" role="list">
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            The ebook (PDF, EPUB, Kindle)
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Code samples and exercises
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            64 video lessons (12 hours)
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Source code for every lesson
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Private community
                        </li>
                        <li class="pricing-tiers-block__feature">
                            <svg class="pricing-tiers-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
                            Team license and invoice
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="pricing-tiers-block__footer">
                <aside class="guarantee" aria-labelledby="guarantee-title">
                    <p class="guarantee__seal" aria-hidden="true"><strong>30</strong> days</p>
                    <div class="guarantee__body">
                        <h3 class="guarantee__title" id="guarantee-title">30-day money-back guarantee</h3>
                        <p class="guarantee__text">Read the book, watch the videos. If it isn’t for you, email us within 30 days for a full refund. No questions, no forms.</p>
                    </div>
                </aside>
                <p class="pricing-tiers-block__note">Prices in USD, VAT included where it applies. Student discount: 40% off with a school email.</p>
            </div>
        </div>
    </div>
</section>

Pricing Tiers

On this page

One-time pricing for a digital product in tiers: every tier lists the same features, included or not, so the difference between them is visible at a glance. A money-back guarantee and the terms close the block.

Technical Details

  • It combines the Guarantee and the Badge; load their stylesheets too.
  • The features are listed once (features), and every tier says which ones it includes (includes, one true or false per feature). An excluded feature is muted and struck through, with a hidden "Not included:" label, because neither the dash icon nor the strikethrough is announced.
  • The old prices have a hidden "Regular price:" label; the buy buttons have the tier name as hidden text, so "Buy the book" stays unique in a list of links.
  • The featured tier is taller and has the primary border; its badge is plain text inside the tier.
  • The block has id="pricing", so the buy buttons of the page can jump to it.
  • Only show a deal (deal) that's real, with its end date.
  • Override the content with pricingTiersBlock and the guarantee with guarantee.

Documentation

Learn about Spruce CSS through our extensive documentation.

Read more
Documentation

Components

Explore our UI library of accessible components built with Spruce CSS.

Read more
Components

Blocks and Pages

Full-width page blocks and complete page templates, ready to copy.

Explore
Blocks and Pages

Find us on GitHub

Did you find a bug? Have an idea or a question? Please open an issue to help us develop the project.

GitHub