The shell shared by product, blog, pricing and link cards. It lays out optional header, default and footer slots but takes no view over their contents. Renders as any element via tag (so a whole card can be a link), with interactive (hover lift), highlighted (accent border) and focus-ring (for the stretched-link pattern) states. External classes merge via tailwind-merge, so a caller can override the tint.
Ejemplos
Basic
A padded, bordered surface.
Encrypted by default
Your notes are yours alone.
<UiCard class="max-w-sm">
<h3 class="font-semibold">Encrypted by default</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Your notes are yours alone.</p>
</UiCard>Interactive and highlighted
Hover to lift; the highlighted card carries the accent border.
Standard
A regular tier.
Recommended
The one most people pick.
<div class="grid gap-4 sm:grid-cols-2">
<UiCard interactive class="hover:border-primary-300">
<h3 class="font-semibold">Standard</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">A regular tier.</p>
</UiCard>
<UiCard highlighted>
<h3 class="font-semibold">Recommended</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">The one most people pick.</p>
</UiCard>
</div>Header and footer
The header and footer slots add dividers around the body.
Plan
Everything included, one price.
<UiCard class="flex max-w-sm flex-col" padding="lg">
<template #header>
<h3 class="font-semibold">Plan</h3>
</template>
<p class="text-sm text-gray-600 dark:text-gray-400">Everything included, one price.</p>
<template #footer>
<UiButton block>Choose plan</UiButton>
</template>
</UiCard>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| tag | string | 'div' | Element (or globally registered component) to render as. divarticlesectionaliany valid tag |
| padding | string | 'md' | Inner padding. nonexssmmdlg |
| radius | string | '2xl' | Corner radius. lgxl2xl |
| shadow | string | 'card' | Base drop shadow. nonecardcard-hover |
| bordered | boolean | true | Draw the surface border. |
| interactive | boolean | false | Hover lift and stronger shadow; add a hover:border-* class to tint the border. |
| highlighted | boolean | false | Accent border and a raised shadow, for the featured card in a group. |
| focusRing | boolean | false | Lift the focus ring to the card for the stretched-link pattern. |
Slots
| Slot | Descripción |
|---|---|
default | Card body. |
header | Optional header, drawn above the body with a divider. |
footer | Optional footer, drawn below the body with a divider. |