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.
<template>
<UPageCard
title="Tailwind CSS"
description="Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS."
icon="i-simple-icons-tailwindcss"
/>
</template>
You can also pass any property from the NuxtLink component such as to, target, exact, etc.
<template>
<UPageCard
title="Tailwind CSS"
description="Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS."
icon="i-simple-icons-tailwindcss"
to="https://nuxt.com/modules/tailwindcss"
target="_blank"
/>
</template>
Slots
header
{}
icon
{}
title
{}
description
{}
footer
{}
default
{}
Props
target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
activeClass
string
exactActiveClass
string
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
prefetchedClass
string
icon
string
undefinedtitle
string
undefineddescription
string
undefinedui
DeepPartial<{ wrapper: string; to: string; icon: { wrapper: string; base: string; }; body: { base: string; }; title: string; description: string; } & { base: string; background: string; divide: string; ring: string; ... 4 more ...; footer: { ...; }; }>
{}href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
rel
any
replace
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
external
boolean
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'
}