---
description: Display a card for content with a header, body and footer.
links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Card.vue
---

## Usage

::component-example
#default
:card-example{class="w-full"}

#code
```vue
<template>
  <UCard>
    <template #header />

    Body

    <template #footer />
  </UCard>
</template>
```
::

## Slots

### `header`

Use the `#header` slot to fill the header.

### `footer`

Use the `#footer` slot to fill the footer.

## Props

:component-props

## Preset

:component-preset