Card

GitHub
Display content in a card with a header, body and footer.

Usage

Use the header, default and footer slots to add content to the Card.

<template>
  <UCard>
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </UCard>
</template>

Title 4.7+

Use the title prop to set the title of the Card's header.

Card with title
<template>
  <UCard title="Card with title" class="w-full">
    <Placeholder class="h-32" />
  </UCard>
</template>

Description 4.7+

Use the description prop to set the description of the Card's header.

Card with description
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<template>
  <UCard
    title="Card with description"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    class="w-full"
  >
    <Placeholder class="h-32" />
  </UCard>
</template>

Variant

Use the variant prop to change the variant of the Card.

<template>
  <UCard variant="subtle">
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </UCard>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

title string
description string
variant'outline' "solid" | "outline" | "soft" | "subtle"
ui { root?: ClassNameValue; header?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; }

Slots

Slot Type
header{}
title{}
description{}
default{}
footer{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    card: {
      slots: {
        root: 'rounded-lg overflow-hidden',
        header: 'p-4 sm:px-6',
        title: 'text-highlighted font-semibold',
        description: 'mt-1 text-muted text-sm',
        body: 'p-4 sm:p-6',
        footer: 'p-4 sm:px-6'
      },
      variants: {
        variant: {
          solid: {
            root: 'bg-inverted text-inverted',
            title: 'text-inverted',
            description: 'text-dimmed'
          },
          outline: {
            root: 'bg-default ring ring-default divide-y divide-default'
          },
          soft: {
            root: 'bg-elevated/50 divide-y divide-default'
          },
          subtle: {
            root: 'bg-elevated/50 ring ring-default divide-y divide-default'
          }
        }
      },
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        card: {
          slots: {
            root: 'rounded-lg overflow-hidden',
            header: 'p-4 sm:px-6',
            title: 'text-highlighted font-semibold',
            description: 'mt-1 text-muted text-sm',
            body: 'p-4 sm:p-6',
            footer: 'p-4 sm:px-6'
          },
          variants: {
            variant: {
              solid: {
                root: 'bg-inverted text-inverted',
                title: 'text-inverted',
                description: 'text-dimmed'
              },
              outline: {
                root: 'bg-default ring ring-default divide-y divide-default'
              },
              soft: {
                root: 'bg-elevated/50 divide-y divide-default'
              },
              subtle: {
                root: 'bg-elevated/50 ring ring-default divide-y divide-default'
              }
            }
          },
          defaultVariants: {
            variant: 'outline'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Calendar

Chip