Compare plans

Find the plan that fits

Every plan includes the core framework, the components and the blocks.

Plan comparison
Feature	Starter $0/ month	Team $29/ month	Enterprise $99/ month
Projects	1	Unlimited	Unlimited
Team members	1	10	Unlimited
Design styles	3	10	10 + custom
Custom domains	Not included	Included	Included
Analytics	Basic	Advanced	Advanced
SSO and audit logs	Not included	Not included	Included
Priority support	Not included	Included	Included
Dedicated manager	Not included	Not included	Included
	Choose Starter	Choose Team	Choose Enterprise

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

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

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

  &__scroll {
    --inline-size: 44rem;
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
  }

  &__table {
    th,
    td {
      text-align: center;
    }

    th:first-child,
    tbody th {
      text-align: start;
    }

    tbody th {
      font-weight: 500;
    }

    tfoot td {
      border-block-end: 0;
    }
  }

  &__featured {
    background-color: color-alpha('primary', 0.06);
  }

  &__plan {
    display: block;
    font-size: font-size('h5');
  }

  &__price {
    color: color('muted');
    display: block;
    font-size: config('font-size-sm', $typography);
    font-weight: 400;

    small {
      margin-inline-start: spacer('xxs');
    }
  }

  &__icon {
    block-size: 1.25rem;
    inline-size: 1.25rem;
    vertical-align: middle;

    &--yes {
      color: color('success', 'alert');
    }

    &--no {
      color: color('border-strong');
    }
  }
}

<section class="comparison-block" aria-labelledby="comparison-title">
    <div class="container">
        <div class="comparison-block__inner">
            <header class="block-heading">
                <p class="block-heading__eyebrow">Compare plans</p>
                <h2 class="block-heading__title" id="comparison-title">Find the plan that fits</h2>
                <p class="block-heading__text">Every plan includes the core framework, the components and the blocks.</p>
            </header>
            <div class="table-responsive comparison-block__scroll">
                <table class="table table--middle table--sticky-header comparison-block__table">
                    <caption class="sr-only">Plan comparison</caption>
                    <thead>
                        <tr>
                            <th scope="col">Feature</th>
                            <th scope="col">
                                <span class="comparison-block__plan">Starter</span>
                                <span class="comparison-block__price">$0<small>/ month</small></span>
                            </th>
                            <th scope="col" class="comparison-block__featured">
                                <span class="comparison-block__plan">Team</span>
                                <span class="comparison-block__price">$29<small>/ month</small></span>
                            </th>
                            <th scope="col">
                                <span class="comparison-block__plan">Enterprise</span>
                                <span class="comparison-block__price">$99<small>/ month</small></span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">Projects</th>
                            <td>1</td>
                            <td class="comparison-block__featured">Unlimited</td>
                            <td>Unlimited</td>
                        </tr>
                        <tr>
                            <th scope="row">Team members</th>
                            <td>1</td>
                            <td class="comparison-block__featured">10</td>
                            <td>Unlimited</td>
                        </tr>
                        <tr>
                            <th scope="row">Design styles</th>
                            <td>3</td>
                            <td class="comparison-block__featured">10</td>
                            <td>10 + custom</td>
                        </tr>
                        <tr>
                            <th scope="row">Custom domains</th>
                            <td><svg class="comparison-block__icon comparison-block__icon--no" 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="M5 12h14"/></svg><span class="sr-only">Not included</span></td>
                            <td class="comparison-block__featured"><svg class="comparison-block__icon comparison-block__icon--yes" 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><span class="sr-only">Included</span></td>
                            <td><svg class="comparison-block__icon comparison-block__icon--yes" 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><span class="sr-only">Included</span></td>
                        </tr>
                        <tr>
                            <th scope="row">Analytics</th>
                            <td>Basic</td>
                            <td class="comparison-block__featured">Advanced</td>
                            <td>Advanced</td>
                        </tr>
                        <tr>
                            <th scope="row">SSO and audit logs</th>
                            <td><svg class="comparison-block__icon comparison-block__icon--no" 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="M5 12h14"/></svg><span class="sr-only">Not included</span></td>
                            <td class="comparison-block__featured"><svg class="comparison-block__icon comparison-block__icon--no" 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="M5 12h14"/></svg><span class="sr-only">Not included</span></td>
                            <td><svg class="comparison-block__icon comparison-block__icon--yes" 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><span class="sr-only">Included</span></td>
                        </tr>
                        <tr>
                            <th scope="row">Priority support</th>
                            <td><svg class="comparison-block__icon comparison-block__icon--no" 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="M5 12h14"/></svg><span class="sr-only">Not included</span></td>
                            <td class="comparison-block__featured"><svg class="comparison-block__icon comparison-block__icon--yes" 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><span class="sr-only">Included</span></td>
                            <td><svg class="comparison-block__icon comparison-block__icon--yes" 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><span class="sr-only">Included</span></td>
                        </tr>
                        <tr>
                            <th scope="row">Dedicated manager</th>
                            <td><svg class="comparison-block__icon comparison-block__icon--no" 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="M5 12h14"/></svg><span class="sr-only">Not included</span></td>
                            <td class="comparison-block__featured"><svg class="comparison-block__icon comparison-block__icon--no" 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="M5 12h14"/></svg><span class="sr-only">Not included</span></td>
                            <td><svg class="comparison-block__icon comparison-block__icon--yes" 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><span class="sr-only">Included</span></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td></td>
                            <td><a class="btn btn--sm btn--outline-primary" href="#">Choose<span class="sr-only"> Starter</span></a></td>
                            <td class="comparison-block__featured"><a class="btn btn--sm btn--primary" href="#">Choose<span class="sr-only"> Team</span></a></td>
                            <td><a class="btn btn--sm btn--outline-primary" href="#">Choose<span class="sr-only"> Enterprise</span></a></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</section>

Comparison

Technical Details

A real data table: column headers for the plans, row headers for the features, a visually hidden caption, and scope attributes.
The check and dash icons have hidden "Included"/"Not included" text, so the table reads well with a screen reader.
It uses Spruce's .table--sticky-header and .table-responsive: the header stays visible while scrolling, and the table scrolls horizontally on small screens.
Override the content with comparisonBlock; the yes and no values render the icons.