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

Use the #header slot to fill the header.

Use the #footer slot to fill the footer.

Props

ui
any
undefined
as
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"  }}