Layout
Card
Display a card for content with a header, body and footer.
Usage
<template>
<UCard>
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</template>
Slots
header
Use the #header slot to fill the header.
footer
Use the #footer slot to fill the footer.
Props
ui
any
undefinedas
string
"div"Config
UCard.vue
{
"base": "overflow-hidden",
"background": "bg-white dark:bg-gray-900",
"divide": "divide-y divide-gray-200 dark:divide-gray-800",
"ring": "ring-1 ring-gray-200 dark:ring-gray-800",
"rounded": "rounded-lg",
"shadow": "shadow",
"body": {
"base": "",
"background": "",
"padding": "px-4 py-5 sm:p-6"
},
"header": {
"base": "",
"background": "",
"padding": "px-4 py-5 sm:px-6"
},
"footer": {
"base": "",
"background": "",
"padding": "px-4 py-4 sm:px-6"
}
}