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

undefined

as
string

"div"

Preset

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