Browse Blocks

Pricing and Download

An offer with explicit price, requirements, version and secondary action.

Basic

An offer with explicit price, requirements, version and secondary action.

Fit available widthPhone · 390 pxTablet · 768 pxDesktop · 1280 px
View Code
<section class="site-section stack gap-xl" aria-labelledby="pricing-title">
  <header class="stack gap-md site-measure-center text-center">
    <p class="eyebrow">
      Example offer
    </p>
    <h2 id="pricing-title">
      One purchase. Room to grow.
    </h2>
    <p class="site-lead muted">
      A straightforward offer for a focused product. Everything you need to get started, in one place.
    </p>
  </header>
  <div class="site-offer site-demo site-feature-row">
    <div class="stack gap-lg">
      <h3>
        The complete edition
      </h3>
      <p class="muted">
        Start with the essentials and make the workspace your own.
      </p>
      <strong>
        What’s included
      </strong>
      <ul class="stack gap-sm">
        <li>
          All core features
        </li>
        <li>
          Unlimited personal projects
        </li>
        <li>
          Local export and backup
        </li>
        <li>
          No recurring subscription
        </li>
      </ul>
    </div>
    <div class="site-purchase stack gap-lg">
      <p class="muted">
        Pay once, keep creating
      </p>
      <p class="site-price">
        $29
        <span class="muted">
          USD
        </span>
      </p>
      <a class="btn" href="https://example.com/">
        Get the Complete Edition
      </a>
      <p class="muted">
        Illustrative pricing. Replace with your product’s offer and checkout destination.
      </p>
    </div>
  </div>
</section>