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>
Add a cover image
Pass imageUrl (and optional imageAlt) for a full-bleed cover image at the top of the card, respecting the card radius. Use the #media slot instead if you need custom markup (e.g. a <picture> element).
<template>
<UiCard variant="outline" image-url="/cover.jpg" image-alt="Cover photo">
<template #body>
<h3>Card Title</h3>
<p>Card content…</p>
</template>
</UiCard>
</template>
Make a card a link
Setting to or href renders the whole card as a link — the root element switches from div to as (default 'a') and gains hover/active styling. External URLs (http(s):, mailto:, tel:, or protocol-relative //) automatically get target="_blank" rel="noopener noreferrer".
<template>
<UiCard variant="outline" href="https://colorffy.com">
<template #body>Clickable card</template>
</UiCard>
<!-- Internal navigation, e.g. with NuxtLink/RouterLink -->
<UiCard variant="outline" to="/dashboard" as="NuxtLink">
<template #body>Internal link 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. |
imageUrl | string | null | — | Cover image URL, rendered full-bleed at the top of the card. |
imageAlt | string | null | — | Alt text for the cover image (decorative/empty by default). |
to | string | object | null | — | Navigation destination. Activates link mode. |
href | string | null | — | Standard href for link mode (e.g. external links). Activates link mode. |
as | string | object | null | 'a' | Tag/component rendered in link mode. Ignored unless to/href is set. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes. |
Slots: #media (cover image area, defaults to the imageUrl/imageAlt image), #header, #body, #footer (and any content placed inside).