Comparison List

Displays features or products side-by-side.

Basic Comparison List

Unlimited projects

Priority support

Custom integrations

Dedicated account manager

<div class="max-w-sm">
   <div class="d-f fd-c g-3">
      <div class="d-f ai-c g-3">
         <div class="d-f ai-c jc-c d-6 rad-9 bg-green-1 tc-green">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
         </div>
         <span class="fs-sm tc-slate">Unlimited projects</span>
      </div>
      <div class="d-f ai-c g-3">
         <div class="d-f ai-c jc-c d-6 rad-9 bg-green-1 tc-green">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
         </div>
         <span class="fs-sm tc-slate">Priority support</span>
      </div>
      <div class="d-f ai-c g-3">
         <div class="d-f ai-c jc-c d-6 rad-9 bg-green-1 tc-green">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
         </div>
         <span class="fs-sm tc-slate">Custom integrations</span>
      </div>
      <div class="d-f ai-c g-3">
         <div class="d-f ai-c jc-c d-6 rad-9 bg-red-1 tc-red">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
         </div>
         <span class="fs-sm tc-slate-6">Dedicated account manager</span>
      </div>
   </div>
</div>

Side by Side

Included

Unlimited bandwidth

SSL certificate

24/7 monitoring

Not included

Custom domain

Priority support

API access

<div class="d-g gtc-2 g-8">
   <div>
      <h3 class="ff-s fs-md fw-600 tc-slate mb-4">Included</h3>
      <div class="d-f fd-c g-3">
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
            <span class="fs-sm tc-slate">Unlimited bandwidth</span>
         </div>
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
            <span class="fs-sm tc-slate">SSL certificate</span>
         </div>
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
            <span class="fs-sm tc-slate">24/7 monitoring</span>
         </div>
      </div>
   </div>
   <div>
      <h3 class="ff-s fs-md fw-600 tc-slate mb-4">Not included</h3>
      <div class="d-f fd-c g-3">
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-red" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            <span class="fs-sm tc-slate-6">Custom domain</span>
         </div>
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-red" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            <span class="fs-sm tc-slate-6">Priority support</span>
         </div>
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-red" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            <span class="fs-sm tc-slate-6">API access</span>
         </div>
      </div>
   </div>
</div>