Components

Unique subscription plan card

Displays a detailed unique subscription plan with a list of features and a prominently styled pricing panel. Useful for showing tiered pricing options in comparison sections.

CurrentActiveSubscriptionCard

SubscriptionPlanCard

UniqueSubscriptionPlanCard

Component

View code

Show playground

Plan name

Plan description

Feature 1
Feature 2
Feature 3
Feature 4
Feature 5
Feature 6
Feature 7
Feature 8

Over title0€

Props

Props	Default	Type
`title`	`'Plan name'`	`string`
`description`	`'Plan description'`	`string`
`features`	`An example array`	`array`
`overtitle`	—	`string`
`price`	`'0€'`	`string`
`buttonText`	`'Get started today'`	`string`

Usage

title

Sets the title of the plan.

 <template>
    <UniqueSubscriptionPlanCard 
        title="Plan name"
    />
</template>

Type: string
Default: 'Plan name'

description

Sets the description of the plan.

 <template>
    <UniqueSubscriptionPlanCard 
        description="Plan description"
    />
</template>

Type: string
Default: 'Plan description'

features

Sets the features of the plan.

 <template>
    <UniqueSubscriptionPlanCard 
        :features="exampleFeatures"
    />
</template>
<script setup lang="ts">
const exampleFeatures = ref([
    "Feature 1",
    "Feature 2",
    "Feature 3",
    "Feature 4",
    "Feature 5",
    "Feature 6",
    "Feature 7",
    "Feature 8",
])
</script>

Type: array
Default: An example array

overtitle

Sets the over title of the plan. It does not get displayed if it is not passed throug props.

 <template>
    <UniqueSubscriptionPlanCard 
        overtitle="Over title"
    />
</template>

Type: string

price

Sets the price of the plan.

 <template>
    <UniqueSubscriptionPlanCard 
        price="0€"
    />
</template>

Type: string
Default: '0€'

buttonText

Sets the button text of the call to action.

 <template>
    <UniqueSubscriptionPlanCard 
        buttonText="Get started today"
    />
</template>

Type: string
Default: 'Get started today'

Emits

Value	Description
`@click`	Triggers a callback function when the CTA button is clicked.

Example

 <template>
    <UniqueSubscriptionPlanCard 
        @click="handleCTAClick"
    />
</template>
<script setup lang="ts">
const handleCTAClick = () => {
    console.log("Button clicked")
}
</script>