Skip to content
FutureThemes

PricingCard

A pricing card component which allows you to enter a price, a description and a list of included items!

Also allows you to specify a card as “featured” which gives it extra styling!

index.mdx
import { PricingCard } from '@futurethemes/galaxy:components'


<PricingCard
    title="Serenity"
    description="Firefly Class"
    cost="$10,000"
    features={[
      'Primary Buffer Panel (missing)',
      'Multiple Crew Pods',
      'Crew Bunks',
    ]}
    class=""
    href="/"
    linkLabel="Sign Up"
  />

Props

title

string

Title to display.

description

string

Description to display.

cost

string

The cost to display. Must include currency symbol too!

costPeriod

string

A smaller span to display after your cost. Useful for “/month” or “per year”.

features

string[]

A list of features which is displayed in a html ul.

href

string

Url local for your Call to Action.

linkLabel

string

Label for your Call to Action.

boolean

Whether to mark your PricingCard as “featured”.

Featured cards are bigger and have more styling to make them stand out!

class

string

Pass arbitrary classes to your final <section> tag.

Tailwind classes are allowed!