Price Card

Overview

The Pricing Card Component is a customizable and visually appealing UI element designed for displaying pricing information for products, services, or subscriptions. It highlights the title, price, a brief description, and includes a call-to-action button. This component is ideal for use in pricing pages, service listings, or anywhere you need to present cost-related information clearly and attractively.

Features

• Responsive Layout: Designed to fit well within various layout contexts, ensuring readability and visual appeal across devices.
• Customizable Content: Supports essential details like title, price, and description to communicate value effectively.
• Call-to-Action Button: Includes an actionable button to guide users towards a specific action, such as making a purchase or contacting for more information.
• Dark Mode Support: Ready for dark mode themes, ensuring consistency with your application's appearance settings.

Props

The component accepts the following props for customization:

• title (String, required): The name or title of the product, service, or plan.
• price (String, required): The cost of the product, service, or subscription plan.
• description (String, required): A short summary or list of features included in the offering.
• label (String, required): The text displayed on the call-to-action button.

Example Usage

<PriceCard
  title="Basic Plan"
  price="$9.99"
  description="An affordable plan that includes all the basic features you need to get started."
  label="Sign Up"
/>

Customization

• Content Adaptation: Modify the title, price, description, and label props to match the specific offering you're presenting.
• Styling Adjustments: Tailwind CSS is utilized for styling. Feel free to adjust the Tailwind classes in the template to match your design system or branding requirements.

Usage

To integrate the Pricing Card Component into your Vue or Nuxt project:

1. Ensure you have Tailwind CSS configured in your project for consistent styling.
2. Copy the component code into a new .vue file within your project's components directory.
3. Import and use the component in your pages or components where you need to display pricing information.

Component Code

[
<script setup lang="ts">
interface PropsInterface {
  title: string;
  price: string;
  description: string;
  label: string;
}

defineProps<PropsInterface>();
</script>

<template>
  <div class="my-md flex justify-center">
    <div
      class="flex w-72 flex-col justify-between rounded-lg border-2 border-black p-md text-center text-black dark:border-primary dark:text-primary"
    >
      <div class="flex h-1/3 flex-col">
        <h3 class="m-auto text-2xl font-bold">
          {{ title }}
        </h3>
        <h4 class="m-auto text-6xl font-bold">
          {{ price }}
        </h4>
      </div>
      <div class="flex h-2/3 flex-col justify-between">
        <div class="my-md">
          <p class="text-left text-base">{{ description }}</p>
        </div>
        <div class="mx-xs">
          <AppButton
            :label="label"
            link="/contact"
          />
        </div>
      </div>
    </div>
  </div>
</template>