Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

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.

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.

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"
    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
any
activeClass
string
exactActiveClass
string
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
rel
(string & {}) | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc"
"noopener""noreferrer""nofollow""sponsored""ugc"
prefetchedClass
string
icon
string
undefined
title
string
undefined
description
string
undefined
ui
{}
{}
href
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'
}