PageCard

A pre-built Card to add links in your pages.

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.

<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>

Look at the Nuxt.com modules page to see what you can do!

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 (default: undefined)
• title - string (default: undefined)
• description - string (default: undefined)
• ui - DeepPartial<{ wrapper: string; to: string; icon: { wrapper: string; base: string; }; body: { base: string; }; title: string; description: string; }> (default: {})
• 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'
}