# Pricing Tiers (Block, Conversion) > 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. - Type: block - Preview: https://sprucecss.com/blocks/pricing-tiers/ - Markdown: https://sprucecss.com/blocks/pricing-tiers.md - Framework: Spruce CSS v3 (`npm install sprucecss`). Every SCSS file below starts with `@use 'sprucecss/scss/spruce' as *;`, so compile it with `node_modules` as a Sass load path (`sass --load-path=node_modules`). ## How to use it 1. Copy the SCSS of this block and of every stylesheet dependency into your project, in the order listed under Dependencies, and compile them with your Spruce CSS setup. 2. Copy the HTML. 3. Replace the demo content (text, links, image URLs) in the HTML; keep the classes, the structure and the accessibility attributes. The HTML below is rendered with the default content. In the Spruce UI source (Nunjucks) the content comes from a data object: Override with `pricingTiersBlock` ({ heading, deal, features, tiers: [{ name, description, price, oldPrice, period, includes: [true|false per feature], cta, featured, badge }], note }) and the guarantee with `guarantee`. ## Dependencies Stylesheets, in this order (each one is `{name}.scss` in the library; its endpoint has the code): 1. `content-and-layout/container`: https://sprucecss.com/ui/content-and-layout/container.md 2. `content-and-layout/block-heading`: https://sprucecss.com/ui/content-and-layout/block-heading.md 3. `misc/badge`: https://sprucecss.com/ui/misc/badge.md 4. `misc/guarantee`: https://sprucecss.com/ui/misc/guarantee.md 5. `block/pricing-tiers` (this block, below) ## HTML ```html

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

``` ## SCSS ```scss @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; } } ``` ## Notes ## Technical Details - It combines the [Guarantee](https://sprucecss.com/ui/misc/guarantee/) and the [Badge](https://sprucecss.com/ui/misc/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`.