PricingCard

Plan card with a price, a feature list and a select button. The size prop (xs, sm, md, lg, xl) sets the padding and title size.

Jump to API reference

Import

Vue
import { UiPricingCard } from '@ziyarago/ui/vue'

Plans

Economy

$1,290/ person
  • 3-star hotel
  • Shared transfer
  • 10 nights

Premium

Popular
$2,490/ person
  • 5-star near Haram
  • Private transfer
  • Personal guide
Vue
<UiPricingCard
  name="Economy"
  price="$1,290"
  period="/ person"
  :features="['3-star hotel', 'Shared transfer', '10 nights']"
  cta="Choose"
 />

<UiPricingCard
  name="Premium"
  price="$2,490"
  period="/ person"
  badge="Popular"
  featured
  :features="['5-star near Haram', 'Private transfer', 'Personal guide']"
  cta="Choose Premium"
 />

Sizes

Economy

$1,290/ person
  • 3-star hotel
  • Shared transfer

Economy

$1,290/ person
  • 3-star hotel
  • Shared transfer

Economy

$1,290/ person
  • 3-star hotel
  • Shared transfer

Economy

$1,290/ person
  • 3-star hotel
  • Shared transfer

Economy

$1,290/ person
  • 3-star hotel
  • Shared transfer
Vue
<UiPricingCard
  name="Economy"
  price="$1,290"
  period="/ person"
  :features="['3-star hotel', 'Shared transfer']"
  cta="Choose"
  size="xs"
 />

<UiPricingCard
  name="Economy"
  price="$1,290"
  period="/ person"
  :features="['3-star hotel', 'Shared transfer']"
  cta="Choose"
  size="sm"
 />

<UiPricingCard
  name="Economy"
  price="$1,290"
  period="/ person"
  :features="['3-star hotel', 'Shared transfer']"
  cta="Choose"
  size="md"
 />

<UiPricingCard
  name="Economy"
  price="$1,290"
  period="/ person"
  :features="['3-star hotel', 'Shared transfer']"
  cta="Choose"
  size="lg"
 />

<UiPricingCard
  name="Economy"
  price="$1,290"
  period="/ person"
  :features="['3-star hotel', 'Shared transfer']"
  cta="Choose"
  size="xl"
 />

API reference

Pricing plan card with price, feature list and a select button.

Props

PropType and valuesDefaultDescription
namerequiredstring—Plan name.
pricerequiredstring | number—Price text, shown large.
periodstring—Suffix after the price, such as "/mo".
featuresstring[][]Feature bullets with check icons.
badgestring—Brand badge next to the name, such as "Popular".
featuredbooleanfalseHighlights the card and makes the button primary.
ctastring'Choose'Button label.
sizexssmmdlgxl'md'Card padding and title size.

Events

Vue: @name. React: onName.

selectCalled when the button is clicked.