layout

Card

Display a card for content with a header, body and footer.

Usage

<template>
  <UCard>
    <template #header />
    Body
    <template #footer />
  </UCard>
</template>

Slots

Use the #header slot to fill the header.

Use the #footer slot to fill the footer.

Props

ui
any

{}

as
string

"div"

Preset

appConfig.ui.card
{
  "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"
  }
}