Usage
Built on top of the Card component, the PageCard can be used in a PageGrid, PageColumns or a LandingGrid.
Use the title, description and icon props to customize the card.
Tailwind CSS
Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS.
{
"message": "You should use slots with <ContentRenderer>",
"value": {},
"excerpt": false,
"tag": "div"
}You can also pass any property from the NuxtLink component such as to, target, exact, etc.
{
"message": "You should use slots with <ContentRenderer>",
"value": {},
"excerpt": false,
"tag": "div"
}Slots
header
{}
icon
{}
title
{}
description
{}
footer
{}
default
{}
Props
Config
{
wrapper: 'relative group',
to: 'hover:ring-2 hover:ring-primary-500 dark:hover:ring-primary-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
icon: {
wrapper: 'mb-6 flex',
base: 'w-10 h-10 flex-shrink-0 text-primary'
},
body: {
base: 'flex-1'
},
title: 'text-gray-900 dark:text-white text-base font-semibold truncate flex items-center gap-1.5',
description: 'text-[15px] text-gray-500 dark:text-gray-400 mt-1'
}