Card

Glass surface that groups related content with an optional title and actions. The size prop (xs, sm, md, lg, xl) sets the padding and title size.

Jump to API reference

Import

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

With title

Upcoming departure

Umrah Economy, 14 nights
Flight SV 1234 leaves Tashkent on 12 November at 08:40.
Vue
<UiCard
  title="Upcoming departure"
  subtitle="Umrah Economy, 14 nights"
>
  Flight SV 1234 leaves Tashkent on 12 November at 08:40.
</UiCard>

With actions

Group manifest

Edit
42 pilgrims confirmed, 3 documents pending.
Vue
<UiCard title="Group manifest">
  42 pilgrims confirmed, 3 documents pending.
  <template #actions>Edit</template>
</UiCard>

Inverse

Premium package

Private transfer, 5-star hotel next to the Haram and a dedicated guide.
Vue
<UiCard variant="inverse" title="Premium package">
  Private transfer, 5-star hotel next to the Haram and a dedicated guide.
</UiCard>

Gradient tones (soft)

Brand

Soft gradient tinted with the brand tone.

Sky

Soft gradient tinted with the sky tone.

Success

Soft gradient tinted with the success tone.

Warning

Soft gradient tinted with the warning tone.

Danger

Soft gradient tinted with the danger tone.

Violet

Soft gradient tinted with the violet tone.

Rose

Soft gradient tinted with the rose tone.

Neutral

Soft gradient tinted with the neutral tone.
Vue
<UiCard variant="gradient" tone="brand" title="Brand">
  Soft gradient tinted with the brand tone.
</UiCard>

<UiCard variant="gradient" tone="sky" title="Sky">
  Soft gradient tinted with the sky tone.
</UiCard>

<UiCard variant="gradient" tone="success" title="Success">
  Soft gradient tinted with the success tone.
</UiCard>

<UiCard variant="gradient" tone="warning" title="Warning">
  Soft gradient tinted with the warning tone.
</UiCard>

<UiCard variant="gradient" tone="danger" title="Danger">
  Soft gradient tinted with the danger tone.
</UiCard>

<UiCard variant="gradient" tone="violet" title="Violet">
  Soft gradient tinted with the violet tone.
</UiCard>

<UiCard variant="gradient" tone="rose" title="Rose">
  Soft gradient tinted with the rose tone.
</UiCard>

<UiCard variant="gradient" tone="neutral" title="Neutral">
  Soft gradient tinted with the neutral tone.
</UiCard>

Gradient tones (vivid)

Brand

Vivid gradient, text switches to stay readable.

Sky

Vivid gradient, text switches to stay readable.

Success

Vivid gradient, text switches to stay readable.

Warning

Vivid gradient, text switches to stay readable.

Danger

Vivid gradient, text switches to stay readable.

Violet

Vivid gradient, text switches to stay readable.

Rose

Vivid gradient, text switches to stay readable.

Neutral

Vivid gradient, text switches to stay readable.
Vue
<UiCard
  variant="gradient"
  tone="brand"
  intensity="vivid"
  title="Brand"
>
  Vivid gradient, text switches to stay readable.
</UiCard>

<UiCard variant="gradient" tone="sky" intensity="vivid" title="Sky">
  Vivid gradient, text switches to stay readable.
</UiCard>

<UiCard
  variant="gradient"
  tone="success"
  intensity="vivid"
  title="Success"
>
  Vivid gradient, text switches to stay readable.
</UiCard>

<UiCard
  variant="gradient"
  tone="warning"
  intensity="vivid"
  title="Warning"
>
  Vivid gradient, text switches to stay readable.
</UiCard>

<UiCard
  variant="gradient"
  tone="danger"
  intensity="vivid"
  title="Danger"
>
  Vivid gradient, text switches to stay readable.
</UiCard>

<UiCard
  variant="gradient"
  tone="violet"
  intensity="vivid"
  title="Violet"
>
  Vivid gradient, text switches to stay readable.
</UiCard>

<UiCard
  variant="gradient"
  tone="rose"
  intensity="vivid"
  title="Rose"
>
  Vivid gradient, text switches to stay readable.
</UiCard>

<UiCard
  variant="gradient"
  tone="neutral"
  intensity="vivid"
  title="Neutral"
>
  Vivid gradient, text switches to stay readable.
</UiCard>

Sizes

Upcoming departure

Umrah Economy, 14 nights
Flight SV 1234 leaves Tashkent at 08:40.

Upcoming departure

Umrah Economy, 14 nights
Flight SV 1234 leaves Tashkent at 08:40.

Upcoming departure

Umrah Economy, 14 nights
Flight SV 1234 leaves Tashkent at 08:40.

Upcoming departure

Umrah Economy, 14 nights
Flight SV 1234 leaves Tashkent at 08:40.

Upcoming departure

Umrah Economy, 14 nights
Flight SV 1234 leaves Tashkent at 08:40.
Vue
<UiCard
  title="Upcoming departure"
  subtitle="Umrah Economy, 14 nights"
  size="xs"
>
  Flight SV 1234 leaves Tashkent at 08:40.
</UiCard>

<UiCard
  title="Upcoming departure"
  subtitle="Umrah Economy, 14 nights"
  size="sm"
>
  Flight SV 1234 leaves Tashkent at 08:40.
</UiCard>

<UiCard
  title="Upcoming departure"
  subtitle="Umrah Economy, 14 nights"
  size="md"
>
  Flight SV 1234 leaves Tashkent at 08:40.
</UiCard>

<UiCard
  title="Upcoming departure"
  subtitle="Umrah Economy, 14 nights"
  size="lg"
>
  Flight SV 1234 leaves Tashkent at 08:40.
</UiCard>

<UiCard
  title="Upcoming departure"
  subtitle="Umrah Economy, 14 nights"
  size="xl"
>
  Flight SV 1234 leaves Tashkent at 08:40.
</UiCard>

API reference

Glass surface container with an optional title header, used to group related content.

Props

PropType and valuesDefaultDescription
titlestring—Header title. The header renders only when title or the actions slot is set.
subtitlestring—Muted line under the title.
variantinversegradientoutline—inverse is a dark card regardless of the page theme; gradient is a tinted gradient card colored by tone; outline is transparent with a border. Omit for the default glass card.
tonebrandskysuccesswarningdangerneutralroseviolet'brand'Gradient color. Used only with variant="gradient".
intensityvivid—With variant="gradient", fills the card with a saturated color instead of a soft tint.
paddingnone—none removes the inner padding (for full-bleed tables or images). Other paddings come from size.
interactivebooleanfalseAdds a pointer cursor and hover lift. With a click handler the card also becomes keyboard focusable (Enter activates).
sizexssmmdlgxl'md'Padding, gap and title size.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultCard body.
actionsRight side of the header, for buttons or menus.
headerReplaces the whole title/actions header with custom content.
footerRow under the body, for buttons or meta.

Events

Vue: @name. React: onName.

clickNative click on the card. Combine with interactive.

Notes

  • Vue slot names are React props (actions) and children (default).