Display a card for content with a header, body and footer.
<template>
<UCard>
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</template>
header
Use the #header
slot to fill the header.
footer
Use the #footer
slot to fill the footer.
ui
An object to customize the card’s appearance:
{
base: '',
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'
}
}
as
The HTML element to render the card as. Defaults to "div"
.
The default configuration for the Card component can be customized in your nuxt.config.ts
:
{
base: '',
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'
}
}