OptionCard

Selectable card with icon or image, title, description and price; used inside OptionCards. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue

import { UiOptionCard } from '@ziyarago/ui/vue'

Single choice

Vue

<UiOptionCard
  title="Economy"
  desc="3-star, 800 m from Haram"
  price="$890"
  icon="bed-double"
  checked
 />

<UiOptionCard
  title="Premium"
  desc="5-star, Haram view"
  price="$1 790"
  icon="crown"
  :checked="false"
 />

Multiple

Vue

<UiOptionCard
  title="Airport transfer"
  desc="Round trip, private car"
  price="+$60"
  icon="car"
  multiple
  checked
 />

Sizes

Vue

<UiOptionCard
  size="xs"
  title="Premium"
  desc="5-star, Haram view"
  price="$1 790"
  icon="crown"
  checked
 />

<UiOptionCard
  size="sm"
  title="Premium"
  desc="5-star, Haram view"
  price="$1 790"
  icon="crown"
  checked
 />

<UiOptionCard
  size="md"
  title="Premium"
  desc="5-star, Haram view"
  price="$1 790"
  icon="crown"
  checked
 />

<UiOptionCard
  size="lg"
  title="Premium"
  desc="5-star, Haram view"
  price="$1 790"
  icon="crown"
  checked
 />

<UiOptionCard
  size="xl"
  title="Premium"
  desc="5-star, Haram view"
  price="$1 790"
  icon="crown"
  checked
 />

API reference

Selectable card with title, description, price and optional image or icon. Usually rendered by OptionCards.

Props

PropType and valuesDefaultDescription

titlestring—Main text.

descstring—Secondary text under the title.

pricestring—Right-aligned price or value text.

imagestring—Image URL shown on the left. Takes priority over icon.

iconstring—Icon name shown in a tile on the left.

checkedbooleanfalseSelected state.

multiplebooleanfalseCheckbox look and role instead of radio.

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

clickCalled when the card is pressed. Toggle checked yourself.