Components

Subscription plan card

Presents pricing details, plan features, and a call-to-action for a subscription tier. Commonly used in pricing sections to help users compare and select plans.

CurrentActiveSubscriptionCard

SubscriptionPlanCard

UniqueSubscriptionPlanCard

Component

View code

Show playground

Plan name

0€/monthly

Cancel whenever you want

Feature 1
Feature 2
Feature 3

Props

Props	Default	Type
`isActive`	`false`	`boolean`
`isFeatured`	`false`	`boolean`
`title`	`'Plan name'`	`string`
`description`	`'Cancel whenever you want'`	`string`
`monthlyAmount`	`0`	`number`
`yearlyAmount`	`0`	`number`
`currencySymbol`	`'€'`	`string`
`featuredBadgeText`	`'Recommended'`	`string`
`features`	`An example array`	`string[]`
`hasFeatureListSeparator`	`false`	`boolean`
`isYearly`	`false`	`boolean`
`monthlyText`	`'monthly'`	`string`
`yearlyText`	`'yearly'`	`string`
`showSelectButton`	`true`	`boolean`
`selectButtonText`	`'Get started today'`	`string`
`alignSelectButton`	`Align.CENTER`	`Align`
`buttonStyle`	`ButtonStyleType.NEUTRAL_FILLED`	`ButtonStyleType`
`featuredButtonStyle`	`ButtonStyleType.PRIMARY_BRAND_FILLED`	`ButtonStyleType`

Usage

isActive

Sets the active state of the card. If true, the card will be marked with a check mark.

 <template>
    <SubscriptionPlanCard 
        isActive
    />
</template>

Type: boolean
Default: false

isFeatured

Sets the featured state of the card. If true, a featured badge will be displayed.

 <template>
    <SubscriptionPlanCard 
        isFeatured
    />
</template>

Type: boolean
Default: false

title

Sets the title of the card, which can be assigned to the plan name.

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

Type: string
Default: 'Plan name'

description

Sets the description of the plan.

 <template>
    <SubscriptionPlanCard 
        description="Cancel whenever you want"
    />
</template>

Type: string
Default: 'Cancel whenever you want'

monthlyAmount

Sets the monthly amount of the plan.

 <template>
    <SubscriptionPlanCard 
        monthlyAmount="0"
    />
</template>

Type: number
Default: 0

yearlyAmount

Sets the yearly amount of the plan.

 <template>
    <SubscriptionPlanCard 
        yearlyAmount="0"
    />
</template>

Type: number
Default: 0

currencySymbol

Sets the currency symbol of the plan.

 <template>
    <SubscriptionPlanCard 
        currencySymbol="€"
    />
</template>

Type: string
Default: '€'

featuredBadgeText

Sets the text of the featured badge.

 <template>
    <SubscriptionPlanCard 
        featuredBadgeText="Recommended"
    />
</template>

Type: string
Default: 'Recommended'

features

Sets the features of the plan.

 <template>
    <SubscriptionPlanCard 
        :features="featureList"
    />
</template>
<script setup lang="ts">
const featureList = [
    'Feature 1',
    'Feature 2',
    'Feature 3'
]
</script>

Type: string[]
Default: An example array

hasFeatureListSeparator

Sets the feature list separator.

 <template>
    <SubscriptionPlanCard 
        hasFeatureListSeparator
    />
</template>

Type: boolean
Default: false

isYearly

Sets the yearly state of the plan.

 <template>
    <SubscriptionPlanCard 
        isYearly
    />
</template>

Type: boolean
Default: false

monthlyText

Sets the monthly text of the plan.

 <template>
    <SubscriptionPlanCard 
        monthlyText="monthly"
    />
</template>

Type: string
Default: 'monthly'

yearlyText

Sets the yearly text of the plan.

 <template>
    <SubscriptionPlanCard 
        yearlyText="yearly"
    />
</template>

Type: string
Default: 'yearly'

showSelectButton

Sets the select button state of the plan.

 <template>
    <SubscriptionPlanCard 
        showSelectButton
    />
</template>

Type: boolean
Default: true

selectButtonText

Sets the select button text of the plan.

 <template>
    <SubscriptionPlanCard 
        selectButtonText="Get started today"
    />
</template>

Type: string
Default: 'Get started today'

alignSelectButton

Sets the select button alignment of the plan. Uses the Align enum.

 <template>
    <SubscriptionPlanCard 
        :alignSelectButton="Align.CENTER"
    />
</template>

Type: Align
Default: Align.CENTER

Options

Value	Description
`LEFT`	Content aligns to the left side of the card.
`CENTER`	Content aligns to the center of the card.

buttonStyle

Sets the button style of the plan. Uses the ButtonStyleType enum.

 <template>
    <SubscriptionPlanCard 
        :buttonStyle="ButtonStyleType.NEUTRAL_FILLED"
    />
</template>

featuredButtonStyle

Sets the featured button style of the plan.

 <template>
    <SubscriptionPlanCard 
        :featuredButtonStyle="ButtonStyleType.PRIMARY_BRAND_FILLED"
    />
</template>

Button style options

Value	Description
`PRIMARY_BRAND_FILLED`	Primary brand filled
`PRIMARY_BRAND_TRANSPARENT`	Primary brand transparent
`PRIMARY_BRAND_SOFT`	Primary brand soft
`SECONDARY_BRAND_FILLED`	Secondary brand filled
`NEUTRAL_OUTLINED`	Neutral outlined
`NEUTRAL_TRANSPARENT`	Neutral transparent
`NEUTRAL_TRANSPARENT_SUBTLE`	Neutral transparent subtle
`NEUTRAL_FILLED`	Neutral filled
`DELETE_FILLED`	Delete filled
`DELETE_OUTLINED`	Delete outlined
`DELETE_SOFT`	Delete soft
`DELETE_TRANSPARENT`	Delete transparent