Components
Card
Group related content in a surface with the UiCard component.
UiCard is a surface container. Pick a surface with variant and place content in the #body slot.
Add a card
<template>
<UiCard variant="pane">
<template #body>
<h3>Title</h3>
<p>Card content…</p>
</template>
</UiCard>
</template>
Choose a surface
<template>
<UiCard variant="outline"><template #body>Outline</template></UiCard>
<UiCard variant="elevated"><template #body>Elevated</template></UiCard>
<UiCard variant="pane"><template #body>Pane</template></UiCard>
</template>
Make a card selectable
<template>
<UiCard variant="outline" selectable size="sm">
<template #body>Click-friendly card</template>
</UiCard>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'outline' | 'elevated' | 'pane' | — | Surface style. |
size | 'xs' | 'sm' | 'md' | — | Card size. |
title | string | null | — | Optional title. |
selectable | boolean | false | Adds card-selectable interactive styling. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes. |
Slots: #body (and any content placed inside).