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>
Use the variant prop to change the variant of the Card.
Use the size prop to change the size 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>
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
variant |
|
|
size |
|
|
ui |
|
| Slot | Type |
|---|---|
header |
|
default |
|
footer |
|
export default defineAppConfig({
ui: {
card: {
slots: {
root: 'rounded-lg overflow-hidden',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
size: {
xs: {
header: 'p-2 sm:px-4',
body: 'p-2 sm:p-4',
footer: 'p-2 sm:px-4'
},
sm: {
header: 'p-3 sm:px-5',
body: 'p-3 sm:p-5',
footer: 'p-3 sm:px-5'
},
md: {
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
lg: {
header: 'p-5 sm:px-7',
body: 'p-5 sm:p-7',
footer: 'p-5 sm:px-7'
},
xl: {
header: 'p-6 sm:px-8',
body: 'p-6 sm:p-8',
footer: 'p-6 sm:px-8'
}
},
variant: {
solid: {
root: 'bg-inverted text-inverted'
},
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',
size: 'md'
}
}
}
})
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',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
size: {
xs: {
header: 'p-2 sm:px-4',
body: 'p-2 sm:p-4',
footer: 'p-2 sm:px-4'
},
sm: {
header: 'p-3 sm:px-5',
body: 'p-3 sm:p-5',
footer: 'p-3 sm:px-5'
},
md: {
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
lg: {
header: 'p-5 sm:px-7',
body: 'p-5 sm:p-7',
footer: 'p-5 sm:px-7'
},
xl: {
header: 'p-6 sm:px-8',
body: 'p-6 sm:p-8',
footer: 'p-6 sm:px-8'
}
},
variant: {
solid: {
root: 'bg-inverted text-inverted'
},
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',
size: 'md'
}
}
}
})
]
})