$0 / month

1 project
Community support
Basic analytics

$29 / month

Unlimited projects
Priority support
Advanced analytics
Custom domains

$99 / month

Everything in Team
SSO and audit logs
Dedicated manager

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

.pricing-cards {
  @include layout-grid('m', 16rem);
  align-items: start;
}

.pricing-card {
  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('lg');

    @include breakpoint('md') {
      margin-block-start: calc(#{spacer('s')} * -1);
    }
  }

  &__header {
    @include layout-stack('xxs');
  }

  &__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');
    padding: spacer('xxs') spacer('s');
    position: absolute;
    translate: 0 -50%;
  }

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

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

  &__price {
    align-items: baseline;
    display: flex;
    gap: spacer('xxs');
    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;
  }

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

  &__features {
    @include clear-list;
    @include layout-stack('xs');
    flex-grow: 1;

    li {
      align-items: center;
      display: flex;
      gap: spacer('xs');
    }
  }

  &__check {
    block-size: 1rem;
    color: color('primary');
    flex-shrink: 0;
    inline-size: 1rem;
  }
}

<div class="pricing-cards">
    <article class="pricing-card" aria-labelledby="plan-starter">
        <header class="pricing-card__header">
            <h3 class="pricing-card__title" id="plan-starter">Starter</h3>
            <p class="pricing-card__description">For side projects and trying things out.</p>
        </header>
        <p class="pricing-card__price"><span class="pricing-card__amount" data-monthly="0" data-yearly="0">$0</span> <span class="pricing-card__period">/ month</span></p>
        <ul class="pricing-card__features" role="list">
            <li><svg class="pricing-card__check" 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> 1 project</li>
            <li><svg class="pricing-card__check" 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> Community support</li>
            <li><svg class="pricing-card__check" 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> Basic analytics</li>
        </ul>
        <a class="btn btn--outline-primary btn--block pricing-card__action" href="#">Get started</a>
    </article>
    <article class="pricing-card pricing-card--featured" aria-labelledby="plan-team">
        <header class="pricing-card__header">
            <span class="pricing-card__badge">Most popular</span>
            <h3 class="pricing-card__title" id="plan-team">Team</h3>
            <p class="pricing-card__description">For growing teams that ship every week.</p>
        </header>
        <p class="pricing-card__price"><span class="pricing-card__amount" data-monthly="29" data-yearly="23">$29</span> <span class="pricing-card__period">/ month</span></p>
        <ul class="pricing-card__features" role="list">
            <li><svg class="pricing-card__check" 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> Unlimited projects</li>
            <li><svg class="pricing-card__check" 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> Priority support</li>
            <li><svg class="pricing-card__check" 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> Advanced analytics</li>
            <li><svg class="pricing-card__check" 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> Custom domains</li>
        </ul>
        <a class="btn btn--primary btn--block pricing-card__action" href="#">Start free trial</a>
    </article>
    <article class="pricing-card" aria-labelledby="plan-enterprise">
        <header class="pricing-card__header">
            <h3 class="pricing-card__title" id="plan-enterprise">Enterprise</h3>
            <p class="pricing-card__description">For organizations with advanced needs.</p>
        </header>
        <p class="pricing-card__price"><span class="pricing-card__amount" data-monthly="99" data-yearly="79">$99</span> <span class="pricing-card__period">/ month</span></p>
        <ul class="pricing-card__features" role="list">
            <li><svg class="pricing-card__check" 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> Everything in Team</li>
            <li><svg class="pricing-card__check" 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> SSO and audit logs</li>
            <li><svg class="pricing-card__check" 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> Dedicated manager</li>
        </ul>
        <a class="btn btn--outline-primary btn--block pricing-card__action" href="#">Contact sales</a>
    </article>
</div>

Pricing

Technical Details

Each plan is an <article> labelled by its title, so screen reader users can jump between plans.
The feature lists have role="list" because list-style: none removes the list semantics in Safari.
The featured card uses .pricing-card--featured and a badge; it is lifted only from the md breakpoint, so the cards align when stacked.
The layout uses the layout-grid mixin: the cards wrap without media queries.
All visual values come from tokens (radius(), shadow(), color('surface')), so the cards follow the dark mode and every design style.
The markup is rendered from a pricingPlans list (name, price, yearly price, description, features, call to action, featured). Each amount carries data-monthly and data-yearly attributes, which the Pricing block uses for its billing toggle.