Premium Plan

A pricing card sells a plan on a single surface. The plan name and monthly price lead, a checklist of features carries the argument, and an upgrade button closes the deal, with a popular badge or annual discount often sweetening it. Pricing pages line up several of these side by side, and upsell prompts drop one into settings or paywalls.

<div class="card">
  <div class="card-header"><h3 class="card-title">Premium Plan</h3></div>
  <div class="card-content flex flex-col gap-6">
    <div>
      <span class="text-4xl font-bold sm:text-5xl">$29</span
      ><span class="ml-1 text-muted-foreground">/ month</span>
    </div>
    <p class="text-sm/6 text-muted-foreground">
      Everything you need to scale your project and collaborate with your entire
      team.
    </p>
    <div class="separator"></div>
    <ul class="grid gap-4 text-sm">
      <li class="flex items-center text-muted-foreground">
        <svg
          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"
          class="lucide lucide-check mr-4 size-4 text-primary"
          aria-hidden="true"
        >
          <path d="M20 6 9 17l-5-5"></path></svg
        ><span>Up to 10 team members</span>
      </li>
      <li class="flex items-center text-muted-foreground">
        <svg
          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"
          class="lucide lucide-check mr-4 size-4 text-primary"
          aria-hidden="true"
        >
          <path d="M20 6 9 17l-5-5"></path></svg
        ><span>50GB cloud storage</span>
      </li>
      <li class="flex items-center text-muted-foreground">
        <svg
          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"
          class="lucide lucide-check mr-4 size-4 text-primary"
          aria-hidden="true"
        >
          <path d="M20 6 9 17l-5-5"></path></svg
        ><span>Priority email support</span>
      </li>
      <li class="flex items-center text-muted-foreground">
        <svg
          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"
          class="lucide lucide-check mr-4 size-4 text-primary"
          aria-hidden="true"
        >
          <path d="M20 6 9 17l-5-5"></path></svg
        ><span>Advanced analytics dashboard</span>
      </li>
      <li class="flex items-center text-muted-foreground">
        <svg
          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"
          class="lucide lucide-check mr-4 size-4 text-primary"
          aria-hidden="true"
        >
          <path d="M20 6 9 17l-5-5"></path></svg
        ><span>API access</span>
      </li>
    </ul>
  </div>
  <div class="card-footer">
    <button class="btn btn-lg w-full">Buy Now</button>
  </div>
</div>

Browse more card examples.