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

`header`

Use the #header slot to fill the header.

`footer`

Use the #footer slot to fill the footer.

Props

`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".

Config

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'
  }
}

Card