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" }}