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
{}
{}
as
string
"div"

Config

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