Skip to content
Docs
💻 | Components
Pricing Cards

Pricing Cards Component

Pricing cards in a webpage are graphical elements that display different pricing plans or packages for a product or service. They often include a title, description, features, and price of each plan, and are designed to help users make an informed decision based on their budget and needs. Pricing cards can also include calls-to-action such as "Buy Now" or "Sign Up" to encourage users to take action.

Pricing With Key Features 1

Free

Slate helps you see how many

more days you need

0

$

per Month

  • Unlimited updates
  • Slate helps you see how
  • Amazing offers
  • 1 GB Storage
  • Community Support
1<div class="w-64">
2<div class="rounded-2xl bg-white px-5 py-10 shadow">
3  <p class="text-center text-2xl font-bold text-black">Free</p>
4
5  <h3 class="mt-4 text-center text-sm font-normal text-gray-800">
6    <p>Slate helps you see how many</p>
7    <p>more days you need</p>
8  </h3>
9
10  <div class="mt-5 flex justify-center text-black">
11    <div class="text-6xl font-medium">0</div>
12    <div class="ml-2 flex flex-col">
13      <p class="text-lg font-bold">$</p>
14      <p>per Month</p>
15    </div>
16  </div>
17
18  <div class="ml-3 mt-8">
19    <ul class="grid gap-4">
20      <li class="flex items-center text-black">
21        <svg class="mr-3 h-4 w-4 fill-current text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
22          <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM371.8 211.8l-128 128C238.3 345.3 231.2 348 224 348s-14.34-2.719-19.81-8.188l-64-64c-10.91-10.94-10.91-28.69 0-39.63c10.94-10.94 28.69-10.94 39.63 0L224 280.4l108.2-108.2c10.94-10.94 28.69-10.94 39.63 0C382.7 183.1 382.7 200.9 371.8 211.8z"></path>
23        </svg>
24
25        Unlimited updates
26      </li>
27
28      <li class="inline-flex items-center text-black">
29        <svg class="mr-3 h-4 w-4 fill-current text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
30          <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM371.8 211.8l-128 128C238.3 345.3 231.2 348 224 348s-14.34-2.719-19.81-8.188l-64-64c-10.91-10.94-10.91-28.69 0-39.63c10.94-10.94 28.69-10.94 39.63 0L224 280.4l108.2-108.2c10.94-10.94 28.69-10.94 39.63 0C382.7 183.1 382.7 200.9 371.8 211.8z"></path>
31        </svg>
32
33        Slate helps you see how
34      </li>
35
36      <li class="inline-flex items-center text-black">
37        <svg class="mr-3 h-4 w-4 fill-current text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
38          <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM371.8 211.8l-128 128C238.3 345.3 231.2 348 224 348s-14.34-2.719-19.81-8.188l-64-64c-10.91-10.94-10.91-28.69 0-39.63c10.94-10.94 28.69-10.94 39.63 0L224 280.4l108.2-108.2c10.94-10.94 28.69-10.94 39.63 0C382.7 183.1 382.7 200.9 371.8 211.8z"></path>
39        </svg>
40
41        Amazing offers
42      </li>
43
44      <li class="inline-flex items-center text-black">
45        <svg class="mr-3 h-4 w-4 fill-current text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
46          <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM371.8 211.8l-128 128C238.3 345.3 231.2 348 224 348s-14.34-2.719-19.81-8.188l-64-64c-10.91-10.94-10.91-28.69 0-39.63c10.94-10.94 28.69-10.94 39.63 0L224 280.4l108.2-108.2c10.94-10.94 28.69-10.94 39.63 0C382.7 183.1 382.7 200.9 371.8 211.8z"></path>
47        </svg>
48
49        1 GB Storage
50      </li>
51
52      <li class="inline-flex items-center text-black">
53        <svg class="mr-3 h-4 w-4 fill-current text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
54          <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM371.8 211.8l-128 128C238.3 345.3 231.2 348 224 348s-14.34-2.719-19.81-8.188l-64-64c-10.91-10.94-10.91-28.69 0-39.63c10.94-10.94 28.69-10.94 39.63 0L224 280.4l108.2-108.2c10.94-10.94 28.69-10.94 39.63 0C382.7 183.1 382.7 200.9 371.8 211.8z"></path>
55        </svg>
56        Community Support
57      </li>
58    </ul>
59  </div>
60
61  <div class="mt-8">
62    <button class="w-full rounded-lg bg-black px-3 py-2 text-base font-medium text-white hover:bg-gray-800">Try For Free</button>
63  </div>
64</div>
65</div>

Pricing With Short Product Intro

Standard

0

$

per month

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

1<div class="w-fit rounded-[15px] bg-white py-12 text-black">
2<div class="flex justify-center pb-[30px]">
3  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="64" height="61" class="fill-black">
4    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
5  </svg>
6</div>
7<h2 class="text-center text-2xl font-bold">Standard</h2>
8<div class="mb-4 mt-2 flex justify-center gap-4 font-bold">
9  <div class="place-self-center">
10    <p class="text-[4rem]">0</p>
11  </div>
12  <div class="flex flex-col justify-center">
13    <p class="text-2xl">$</p>
14    <p class="text-xl">per month</p>
15  </div>
16</div>
17<div class="w-72 px-[30px] text-center text-gray-900">
18  <p>Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
19</div>
20<div class="mt-11 px-6">
21  <button class="w-full rounded-md bg-black px-4 py-2 text-lg font-medium text-white transition-all hover:bg-gray-800 disabled:bg-gray-400">Try For Free</button>
22</div>
23</div>

Pricing With Key Features 2

Free

Slate helps you see how many more days you need

19
$
per month

Unlimited product updates

Slate helps you see how

Amazing offers

1GB Cloud Storage

Email and community support

1<div class="relative w-80 rounded-[20px] bg-white px-[40px] py-[50px]">
2<!-- Label -->
3<!-- <div class="absolute -top-8 right-4 flex h-[90px] w-[90px] items-center justify-center rounded-full bg-[#e77c40] text-2xl font-bold text-white">New</div> -->
4<!-- Card Container -->
5<div class="flex w-full flex-col items-center justify-center gap-[15px] tracking-[0.2px]">
6  <!-- Title -->
7  <h1 class="text-[24px] font-bold leading-[32px] text-black">Free</h1>
8  <!-- Subtitle -->
9  <h2 class="text-center font-sans text-lg text-black">Slate helps you see how many more days you need</h2>
10  <!-- Price -->
11  <div class="my-0 flex justify-between px-5 font-semibold text-black">
12    <div class="my-1 text-[64px]">19</div>
13    <div class="ml-3 flex flex-col">
14      <div class="mt-3 text-[24px] font-bold">$</div>
15      <div class="text-[20px]">per month</div>
16    </div>
17  </div>
18  <!-- CTA Button -->
19  <button class="mb-1 w-full rounded-[5px] bg-black px-[40px] py-[15px] font-sans text-[14px] text-xl font-semibold text-white hover:bg-gray-800">Try for Free</button>
20  <!-- Features -->
21  <div class="flex w-full flex-col items-center justify-center gap-4 pt-4">
22    <!-- Feature-Item -->
23    <div class="flex w-full items-center justify-start gap-[8px]">
24      <!-- Icon -->
25      <div class="h-[32px] w-[32px]">
26        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3dbb77" className="w-6 h-6">
27          <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
28        </svg>
29      </div>
30      <!-- Description -->
31      <p class="text-[14px] font-medium text-black">Unlimited product updates</p>
32    </div>
33    <!-- Feature-Item -->
34    <div class="flex w-full items-center justify-start gap-[8px]">
35      <!-- Icon -->
36      <div class="h-[32px] w-[32px]">
37        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3dbb77" className="w-6 h-6">
38          <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
39        </svg>
40      </div>
41      <!-- Description -->
42      <p class="text-[14px] font-medium text-black">Slate helps you see how</p>
43    </div>
44    <!-- Feature-Item -->
45    <div class="flex w-full items-center justify-start gap-[8px]">
46      <!-- Icon -->
47      <div class="h-[32px] w-[32px]">
48        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3dbb77" className="w-6 h-6">
49          <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
50        </svg>
51      </div>
52      <!-- Description -->
53      <p class="text-[14px] font-medium text-black">Amazing offers</p>
54    </div>
55    <!-- Feature-Item -->
56    <div class="flex w-full items-center justify-start gap-[8px]">
57      <!-- Icon -->
58      <div class="h-[32px] w-[32px]">
59        <svg class="mr-2 mt-1 h-6 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
60          <rect width="32" height="32" fill="#BDBDBD" rx="16" />
61          <g clip-path="url(#a)">
62            <path fill="#fff" fill-rule="evenodd" d="M24.296 10.204a.698.698 0 0 1 0 .985l-9.738 9.738a.694.694 0 0 1-.985 0l-4.869-4.869a.697.697 0 0 1 .985-.985l4.376 4.378 9.246-9.247a.698.698 0 0 1 .985 0Z" clip-rule="evenodd" />
63          </g>
64          <defs>
65            <clipPath id="a"><path fill="#fff" d="M0 0h16v11H0z" transform="translate(8 10)" /></clipPath>
66          </defs>
67        </svg>
68      </div>
69      <!-- Description -->
70      <p class="text-[14px] font-medium text-black">1GB Cloud Storage</p>
71    </div>
72    <!-- Feature-Item -->
73    <div class="flex w-full items-center justify-start gap-[8px]">
74      <!-- Icon -->
75      <div class="h-[32px] w-[32px]">
76        <svg class="mr-2 mt-1 h-6 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
77          <rect width="32" height="32" fill="#BDBDBD" rx="16" />
78          <g clip-path="url(#a)">
79            <path fill="#fff" fill-rule="evenodd" d="M24.296 10.204a.698.698 0 0 1 0 .985l-9.738 9.738a.694.694 0 0 1-.985 0l-4.869-4.869a.697.697 0 0 1 .985-.985l4.376 4.378 9.246-9.247a.698.698 0 0 1 .985 0Z" clip-rule="evenodd" />
80          </g>
81          <defs>
82            <clipPath id="a"><path fill="#fff" d="M0 0h16v11H0z" transform="translate(8 10)" /></clipPath>
83          </defs>
84        </svg>
85      </div>
86      <!-- Description -->
87      <p class="text-[14px] font-medium text-black">Email and community support</p>
88    </div>
89  </div>
90</div>
91</div>

Free Trial of Product 1

FREE

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

0

$

per month

1<div class="flex h-[355px] w-[280px] flex-col gap-y-5 rounded-2xl bg-white p-8">
2<h2 class="text-3xl font-bold text-black">FREE</h2>
3<p class="leading-5">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
4<div class="flex items-center justify-start">
5  <h3 class="text-7xl font-semibold text-black">0</h3>
6  <div class="ml-4">
7    <h4 class="text-2xl font-[1000] text-black">$</h4>
8    <h4 class="text-xl font-semibold text-black">per month</h4>
9  </div>
10</div>
11<button class="rounded bg-black py-3 font-semibold text-white">Try for Free</button>
12</div>
13

Free Trial of Product 2

Organize across the world

FREE

Slate helps you see how many days you need to work to reach.Slate helps you see how many days.

0

$

per Month

1<div class="flex w-fit">
2<div class="rounded-2xl bg-white px-10 py-10 shadow-md">
3  <div class="mt-2 flex flex-col">
4    <p class="ml-2 mt-1 w-52 text-center text-lg font-medium text-gray-600">Organize across the world</p>
5    <h1 class="mt-8 text-center text-4xl font-bold text-slate-900">FREE</h1>
6  </div>
7
8  <div>
9    <p class="mt-6 w-56 text-center text-sm text-gray-600">Slate helps you see how many days you need to work to reach.Slate helps you see how many days.</p>
10  </div>
11
12  <div class="mb-3 ml-1 mt-6 flex justify-center text-slate-900">
13    <p class="text-6xl font-semibold">0</p>
14    <div class="ml-2 mt-1 flex flex-col">
15      <p class="text-lg font-bold">$</p>
16      <p class="text-lg font-bold">per Month</p>
17    </div>
18  </div>
19</div>
20</div>

Horizontal Card of Free Trial of Product

STANDARD

Slate helps you see how many more days you need to work to reach. Slate helps you how many more days.

0

$

per Month

1<div class="w-fit rounded-2xl bg-white px-10 py-8 max-[640px]:px-3 sm:flex md:flex lg:flex">
2<div class="md:max-w-56 mt-4 md:mr-6 lg:mr-9">
3  <h1 class="text-2xl font-bold text-slate-900 max-[640px]:text-center">STANDARD</h1>
4  <p class="text-md mb-5 mt-5 font-normal text-gray-600 max-[640px]:w-72 max-[640px]:text-center sm:w-72">Slate helps you see how many more days you need to work to reach. Slate helps you how many more days.</p>
5</div>
6<div>
7  <div class="ml-1 mt-1 flex justify-center text-slate-900">
8    <p class="text-6xl font-semibold">0</p>
9    <div class="ml-2 mt-1 flex flex-col">
10      <p class="text-xl font-bold">$</p>
11      <p class="text-xl font-bold">per Month</p>
12    </div>
13  </div>
14  <div class="mt-9 flex justify-center">
15    <button class="w-fit rounded-md bg-slate-900 px-10 py-2 font-semibold text-white transition-all ease-out hover:scale-105 hover:shadow-lg">Try For Free</button>
16  </div>
17</div>
18</div>
FormProduct Cards