Cards

Customize each card according to your needs, add them wherever you like. It’s recommended to place them inside a flex container to justify the spacing between them (if there are multiple).

src/components/Pricing.astro

---
// Import
import Card from "../components/Card.astro";
---
(...)
<div class="Type your container dimensions here flex justify-between items-center">
  ...
  <!-- Add Here -->
  <Card />
  ...
</div>
(...)

---

1. Pricing Card

Show your clients your pricing packages with their corresponding features, the price, and a button to redirect them to your checkout page.

Preview

Basic

$23

/Month

Get all you need with this package and unlock the power of us tools.

Hosting

Domain

UI planckstar components

Get started

Code

src/components/CardPrice.astro

 ---
 // 4 Instructions in this component

 // Start here by choosing the name of the package. ❶
 const packageName = 'Basic';

 // Choose the price of the package. ❷
 const price = '23';

 // Add a description. ❸
 const description = 'Get all you need with this package and unlock the power of us tools.';

 // Add all the features. ❹
 const features = ["Hosting", "Domain", "UI planckstar components"];
 ---

 <div class="w-90 border border-white/30 flex flex-col text-white">

   <!-- Name -->
   <p class="uppercase mt-8 mx-auto text-2xl">{packageName}</p>

   <!-- Price -->
   <div class="flex items-end m-4">
     <p class="text-4xl">${price}</p>
     <p class="font-light text-gray-300 ml-2">/Month</p>
   </div>

   <!-- Description -->
   <p class="m-4 mb-10">
     {description}
   </p>

   <!-- Features -->
   <div>
     {
       features.map((feature) => (
         <div class="flex border-b border-white/30 space-y-8 w-full items-center first:border-t">
           <div class="flex rounded-full bg-gray-950 items-center size-8 my-6 mx-6 p-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
               class="size-full"
             >
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 d="m4.5 12.75 6 6 9-13.5"
               />
             </svg>
           </div>
           <p>{feature}</p>
         </div>
       ))
     }
   </div>

   <!-- Button -->
   <button
     class="text-gray-200 px-6 py-2 bg-gray-950 border-2 border-gray-950 hover:border-gray-500 rounded-xl transition-colors cursor-pointer mx-4 my-12"
   >
     Get started
   </button>
 </div>

---