Trial Cards

Explore Trial Cards UI blocks for showcasing free trials, plan highlights, and upgrade prompts—ideal for pricing pages and onboarding flows.

Chat Demo: Trial Preview

<div class="-mt-1.5 -me-1.5">
                      <button type="button" class="flex enhxb items-center rdqxy rekd6 tuuss zqruk lk55v mr9qs disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden rjc3l dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-remove-element="#hs-pro-chrstc">
                        <svg class="n2l26 szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="r8a99">Dismiss</span>
                      </button>
                    </div>
                  </div>

<p class="a3z18 qa7td d5esf z0e83 dark:text-neutral-500">
                    Your free trial is expiring. Upgrade to Pro 🚀
                  </p>

<div class="yknc9 flex xp67g yytf5 k9mkq yxawv mr9qs overflow-hidden dark:border-neutral-700" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                    <div class="flex flex-col enhxb overflow-hidden o0y3u on128 w3h0o cgjzl mr9qs j8ti2 dark:bg-blue-400" style="width: 60%"></div>
                  </div>

<button type="button" class="f9d5d l1xlu inline-flex items-center u3ov7 wavyl tuuss k9mkq yn1qn j28t5 x4xl8 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden i3xbl dark:border-blue-800 dark:bg-blue-800/20 dark:hover:bg-blue-800/40 dark:text-blue-500 dark:focus:bg-blue-800/40">
                    <svg class="n2l26 szmrd" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                    Schedule a call
                  </button>
                </div>
              </div>
              </div>
                  <script src="../../assets/vendor/preline/dist/index.js?v=3.1.0"></script>
                </body>
              </html>

<div id="hs-pro-chrstc" class="flex flex-col zxv30 k9mkq yxawv mzy38 dark:bg-neutral-800 dark:border-neutral-700">
                <div class="fop0g">
                  <div class="tllrf flex saet7 items-center r2jif">
                    <p class="qa7td hw6xt tuuss ejo46 dark:text-neutral-200">
                      Trial ends in 7 days
                    </p>

<p class="a3z18 qa7td d5esf z0e83 dark:text-neutral-500">
                    Your free trial is expiring. Upgrade to Pro 🚀
                  </p>

Analytics Demo: Credits new Preview

<!DOCTYPE html>
              <html lang="en" dir="" class="relative alv5c ux1hp">
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                  <title>Preline UI</title>
                  <link rel="shortcut icon" href="../../favicon.ico">
                  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                  <link rel="stylesheet" href="../../assets/css/obfuscated.min.css">
                </head>
                <body>
                <div class="mrrep xp67g cvoid mx-auto">
              <a class="fop0g group flex flex-col zxv30 k9mkq yxawv mzy38 y16xq focus:outline-hidden kwurh dark:bg-neutral-800 dark:border-neutral-700 dark:hover:border-neutral-600 dark:focus:border-neutral-600" href="#">
                <div class="flex saet7 items-center r2jif">
                  <div class="dgznh">
                    <p class="hw6xt tuuss ejo46 dark:text-neutral-200">
                      65/100 credits used
                    </p>
                    <p class="qa7td on128 z0e83 dark:text-neutral-500">
                      Invite team members
                    </p>
                    <p class="nqo4p flex items-center n03hs on128 ed239 dark:text-indigo-500">
                      <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
                      Upgrade now
                      <svg class="n2l26 bnmi1 ed239 opacity-0 group-hover:opacity-100 group-focus:opacity-100 ipy2k ixagr dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path class="lg:opacity-0 qioql lg:group-hover:opacity-100 lg:group-hover:translate-x-0 muqp1" d="M5 12h14"/><path class="b8tjb lg:group-hover:translate-x-0 muqp1" d="m12 5 7 7-7 7"/></svg>
                    </p>
                  </div>

<div class="relative z2dum">
                    <svg class="kquz2 -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                      
                      <circle cx="18" cy="18" r="16" fill="none" class="iraea e2arx dark:text-indigo-500/40" stroke-width="4"></circle>
                      
                      <circle cx="18" cy="18" r="16" fill="none" class="iraea ed239 dark:text-indigo-500" stroke-width="4" stroke-dasharray="100" stroke-dashoffset="35" stroke-linecap="round"></circle>
                    </svg>
                  </div>
                  
                </div>
              </a>
              </div>
                  <script src="../../assets/vendor/preline/dist/index.js?v=3.1.0"></script>
                </body>
              </html>

<a class="fop0g group flex flex-col zxv30 k9mkq yxawv mzy38 y16xq focus:outline-hidden kwurh dark:bg-neutral-800 dark:border-neutral-700 dark:hover:border-neutral-600 dark:focus:border-neutral-600" href="#">
                <div class="flex saet7 items-center r2jif">
                  <div class="dgznh">
                    <p class="hw6xt tuuss ejo46 dark:text-neutral-200">
                      65/100 credits used
                    </p>
                    <p class="qa7td on128 z0e83 dark:text-neutral-500">
                      Invite team members
                    </p>
                    <p class="nqo4p flex items-center n03hs on128 ed239 dark:text-indigo-500">
                      <svg class="n2l26 bnmi1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
                      Upgrade now
                      <svg class="n2l26 bnmi1 ed239 opacity-0 group-hover:opacity-100 group-focus:opacity-100 ipy2k ixagr dark:text-neutral-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path class="lg:opacity-0 qioql lg:group-hover:opacity-100 lg:group-hover:translate-x-0 muqp1" d="M5 12h14"/><path class="b8tjb lg:group-hover:translate-x-0 muqp1" d="m12 5 7 7-7 7"/></svg>
                    </p>
                  </div>

Get all the latest Preline updates and news.

Trial Cards

Chat Demo: Trial Preview

Analytics Demo: Credits new Preview

Subscribe

All examples