PageCard - Nuxt UI Pro

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.

title

description

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.

title

description

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

any

icon

string

undefined

title

string

undefined

description

string

undefined

{}

{}

href

any

target

(string & {}) | "_blank" | "_parent" | "_self" | "_top"

"_blank""_parent""_self""_top"

rel

string

activeClass

string

exactActiveClass

string

prefetchedClass

string

ariaCurrentValue

string

noRel

boolean

prefetch

boolean

noPrefetch

boolean

replace

boolean

external

boolean

PageBody

A wrapper around your pages content.

PageColumns

A customizable column component to display cards in your pages.