Card
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>
<PCard>
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</PCard>
</template>Title
Use the title prop to set the title of the Card's header.
Card with title
<template>
<PCard title="Card with title" class="w-full">
<Placeholder class="h-32" />
</PCard>
</template>The title is rendered as a
div by default. Use the as prop with an object to render it as a heading, for example :as="{ title: 'h3' }". You can also set the root element this way: :as="{ root: 'section', title: 'h3' }".Description
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>
<PCard
title="Card with description"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
class="w-full"
>
<Placeholder class="h-32" />
</PCard>
</template>Variant
Use the variant prop to change the variant of the Card.
<template>
<PCard variant="subtle">
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</PCard>
</template>API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
title | string | |
description | string | |
variant | 'outline' | "outline" | "solid" | "soft" | "subtle" |
ui | { root?: SlotClass; header?: SlotClass; title?: SlotClass; description?: SlotClass; body?: SlotClass; footer?: SlotClass; } |
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: 'color-text-highlighted font-600',
description: 'mt-1 color-text-muted text-sm',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-background-inverted color-text-inverted',
title: 'color-text-inverted',
description: 'color-text-dimmed'
},
outline: {
root: 'bg-background ring ring-border divide-y divide-border'
},
soft: {
root: 'bg-background-elevated/50 divide-y divide-border'
},
subtle: {
root: 'bg-background-elevated/50 ring ring-border divide-y divide-border'
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
card: {
slots: {
root: 'rounded-lg overflow-hidden',
header: 'p-4 sm:px-6',
title: 'color-text-highlighted font-600',
description: 'mt-1 color-text-muted text-sm',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-background-inverted color-text-inverted',
title: 'color-text-inverted',
description: 'color-text-dimmed'
},
outline: {
root: 'bg-background ring ring-border divide-y divide-border'
},
soft: {
root: 'bg-background-elevated/50 divide-y divide-border'
},
subtle: {
root: 'bg-background-elevated/50 ring ring-border divide-y divide-border'
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})Changelog
No recent changes