PageCard

GitHub
显示标题、说明和可选链接的预样式卡组件。

用法

PageCard组件提供了一种灵活的方法，可在默认插槽中显示带有插图的卡片中的内容。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
使用PageGrid、PageColumns或PageList组件显示多个PageCard。

标题

使用title道具设置卡片的标题。

Tailwind CSS
<template>
  <UPageCard title="Tailwind CSS" />
</template>

说明

使用description属性设置卡片的描述。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
  />
</template>

Icon

使用icon道具设置卡片的图标。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
    icon="i-simple-icons-tailwindcss"
  />
</template>

Link

可以从<NuxtLink>组件传递任何属性，如to、target、rel等。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
    icon="i-simple-icons-tailwindcss"
    to="https://tailwindcss.com/blog/tailwindcss-v4"
    target="_blank"
  />
</template>

Variant

使用variant道具来改变卡片的样式。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
    icon="i-simple-icons-tailwindcss"
    to="https://tailwindcss.com/blog/tailwindcss-v4"
    target="_blank"
    variant="soft"
  />
</template>
当使用solid变体来反转颜色时，可以将light或dark类应用于links插槽。

方向

使用orientation属性将默认的slot. px的方向更改为vertical。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
    icon="i-simple-icons-tailwindcss"
    orientation="horizontal"
  >
    <img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
  </UPageCard>
</template>

反向

使用reverse道具反转默认插槽的方向。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
    icon="i-simple-icons-tailwindcss"
    orientation="horizontal"
    reverse
  >
    <img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
  </UPageCard>
</template>

亮点

使用highlight和highlight-color道具在卡片周围显示高亮边框。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
    icon="i-simple-icons-tailwindcss"
    orientation="horizontal"
    highlight
    highlight-color="primary"
  >
    <img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
  </UPageCard>
</template>

聚光灯

使用spotlight和spotlight-color道具显示一个聚光灯效果，跟随鼠标光标，并在悬停时突出显示边框。

当使用to道具时，聚光灯效果将取代悬停效果。最好与outline变体一起使用。
Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
    icon="i-simple-icons-tailwindcss"
    orientation="horizontal"
    spotlight
    spotlight-color="primary"
  >
    <img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
  </UPageCard>
</template>
您还可以使用--spotlight-color和--spotlight-size CSS变量自定义颜色和大小：
<template>
  <UPageCard spotlight class="[--spotlight-color:var(--ui-error)] [--spotlight-size:200px]" />
</template>

示例

作为一个证明

在header或footer插槽中使用User组件，使卡看起来像一个证明。

“Nuxt on Cloudflare infra with minimal effort - this is huge!”
Evan You

Evan You

Author of Vue.js and Vite

<script setup lang="ts">
const testimonial = ref({
  user: {
    name: 'Evan You',
    description: 'Author of Vue.js and Vite',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/499550?v=4',
      alt: 'Evan You',
      loading: 'lazy' as const
    }
  },
  quote: '“Nuxt on Cloudflare infra with minimal effort - this is huge!”'
})
</script>

<template>
  <UPageCard :description="testimonial.quote" class="w-60">
    <template #footer>
      <UUser v-bind="testimonial.user" />
    </template>
  </UPageCard>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const testimonial = ref({
  user: {
    name: 'Evan You',
    description: 'Author of Vue.js and Vite',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/499550?v=4',
      alt: 'Evan You',
      loading: 'lazy' as const
    }
  },
  quote: '“Nuxt on Cloudflare infra with minimal effort - this is huge!”'
})
</script>

<template>
  <UPageCard :description="testimonial.quote" class="w-60">
    <template #footer>
      <UUser v-bind="testimonial.user" />
    </template>
  </UPageCard>
</template>
您可以使用PageColumns组件在多列布局中显示多个PageCard。

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

icon
any

The icon displayed above the title.

title
string
description
string
orientation
'vertical'
"vertical" | "horizontal"

The orientation of the page card.

reverse
false
boolean

Reverse the order of the default slot.

highlight
boolean

Display a line around the page card.

highlightColor
'primary'
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
spotlight
boolean

Display a spotlight effect that follows your mouse cursor and highlights borders on hover.

spotlightColor
'primary'
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
variant
'outline'
"solid" | "outline" | "soft" | "subtle" | "ghost" | "naked"
to
string | it | et
target
null | "_blank" | "_parent" | "_self" | "_top" | string
ui
{ root?: SlotClass; spotlight?: SlotClass; container?: SlotClass; wrapper?: SlotClass; header?: SlotClass; body?: SlotClass; footer?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; title?: SlotClass; description?: SlotClass; }

Slots

Slot Type
header
{}
body
{}
leading
{ ui: object; }
title
{}
description
{}
footer
{}
default
{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    pageCard: {
      slots: {
        root: 'relative flex rounded-lg',
        spotlight: 'absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90',
        container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
        wrapper: 'flex flex-col flex-1 items-start',
        header: 'mb-4',
        body: 'flex-1',
        footer: 'pt-4 mt-auto',
        leading: 'inline-flex items-center mb-2.5',
        leadingIcon: 'size-5 shrink-0 text-primary',
        title: 'text-base text-pretty font-semibold text-highlighted',
        description: 'text-[15px] text-pretty'
      },
      variants: {
        orientation: {
          horizontal: {
            container: 'lg:grid-cols-2 lg:items-center'
          },
          vertical: {
            container: ''
          }
        },
        reverse: {
          true: {
            wrapper: 'order-last'
          }
        },
        variant: {
          solid: {
            root: 'bg-inverted text-inverted',
            title: 'text-inverted',
            description: 'text-dimmed'
          },
          outline: {
            root: 'bg-default ring ring-default',
            description: 'text-muted'
          },
          soft: {
            root: 'bg-elevated/50',
            description: 'text-toned'
          },
          subtle: {
            root: 'bg-elevated/50 ring ring-default',
            description: 'text-toned'
          },
          ghost: {
            description: 'text-muted'
          },
          naked: {
            container: 'p-0 sm:p-0',
            description: 'text-muted'
          }
        },
        to: {
          true: {
            root: [
              'outline-primary/25 has-[>a:focus-visible]:outline-3',
              'transition'
            ]
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        },
        highlight: {
          true: {
            root: 'ring-2'
          }
        },
        highlightColor: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        spotlight: {
          true: {
            root: '[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]'
          }
        },
        spotlightColor: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        }
      },
      compoundVariants: [
        {
          variant: 'solid',
          to: true,
          class: {
            root: 'hover:bg-inverted/90'
          }
        },
        {
          variant: 'outline',
          to: true,
          class: {
            root: 'hover:bg-elevated/50'
          }
        },
        {
          variant: 'soft',
          to: true,
          class: {
            root: 'hover:bg-elevated'
          }
        },
        {
          variant: 'subtle',
          to: true,
          class: {
            root: 'hover:bg-elevated'
          }
        },
        {
          variant: 'subtle',
          to: true,
          highlight: false,
          class: {
            root: 'hover:ring-accented'
          }
        },
        {
          variant: [
            'outline',
            'subtle'
          ],
          to: true,
          highlight: false,
          class: {
            root: 'has-[>a:focus-visible]:ring-primary'
          }
        },
        {
          variant: 'ghost',
          to: true,
          class: {
            root: 'hover:bg-elevated/50'
          }
        },
        {
          highlightColor: 'primary',
          highlight: true,
          class: {
            root: 'ring-primary'
          }
        },
        {
          highlightColor: 'neutral',
          highlight: true,
          class: {
            root: 'ring-inverted'
          }
        },
        {
          spotlightColor: 'primary',
          spotlight: true,
          class: {
            root: '[--spotlight-color:var(--ui-primary)]'
          }
        },
        {
          spotlightColor: 'secondary',
          spotlight: true,
          class: {
            root: '[--spotlight-color:var(--ui-secondary)]'
          }
        },
        {
          spotlightColor: 'success',
          spotlight: true,
          class: {
            root: '[--spotlight-color:var(--ui-success)]'
          }
        },
        {
          spotlightColor: 'info',
          spotlight: true,
          class: {
            root: '[--spotlight-color:var(--ui-info)]'
          }
        },
        {
          spotlightColor: 'warning',
          spotlight: true,
          class: {
            root: '[--spotlight-color:var(--ui-warning)]'
          }
        },
        {
          spotlightColor: 'error',
          spotlight: true,
          class: {
            root: '[--spotlight-color:var(--ui-error)]'
          }
        },
        {
          spotlightColor: 'neutral',
          spotlight: true,
          class: {
            root: '[--spotlight-color:var(--ui-bg-inverted)]'
          }
        }
      ],
      defaultVariants: {
        variant: 'outline',
        highlightColor: 'primary',
        spotlightColor: 'primary'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageCard: {
          slots: {
            root: 'relative flex rounded-lg',
            spotlight: 'absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90',
            container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
            wrapper: 'flex flex-col flex-1 items-start',
            header: 'mb-4',
            body: 'flex-1',
            footer: 'pt-4 mt-auto',
            leading: 'inline-flex items-center mb-2.5',
            leadingIcon: 'size-5 shrink-0 text-primary',
            title: 'text-base text-pretty font-semibold text-highlighted',
            description: 'text-[15px] text-pretty'
          },
          variants: {
            orientation: {
              horizontal: {
                container: 'lg:grid-cols-2 lg:items-center'
              },
              vertical: {
                container: ''
              }
            },
            reverse: {
              true: {
                wrapper: 'order-last'
              }
            },
            variant: {
              solid: {
                root: 'bg-inverted text-inverted',
                title: 'text-inverted',
                description: 'text-dimmed'
              },
              outline: {
                root: 'bg-default ring ring-default',
                description: 'text-muted'
              },
              soft: {
                root: 'bg-elevated/50',
                description: 'text-toned'
              },
              subtle: {
                root: 'bg-elevated/50 ring ring-default',
                description: 'text-toned'
              },
              ghost: {
                description: 'text-muted'
              },
              naked: {
                container: 'p-0 sm:p-0',
                description: 'text-muted'
              }
            },
            to: {
              true: {
                root: [
                  'outline-primary/25 has-[>a:focus-visible]:outline-3',
                  'transition'
                ]
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            },
            highlight: {
              true: {
                root: 'ring-2'
              }
            },
            highlightColor: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            spotlight: {
              true: {
                root: '[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]'
              }
            },
            spotlightColor: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            }
          },
          compoundVariants: [
            {
              variant: 'solid',
              to: true,
              class: {
                root: 'hover:bg-inverted/90'
              }
            },
            {
              variant: 'outline',
              to: true,
              class: {
                root: 'hover:bg-elevated/50'
              }
            },
            {
              variant: 'soft',
              to: true,
              class: {
                root: 'hover:bg-elevated'
              }
            },
            {
              variant: 'subtle',
              to: true,
              class: {
                root: 'hover:bg-elevated'
              }
            },
            {
              variant: 'subtle',
              to: true,
              highlight: false,
              class: {
                root: 'hover:ring-accented'
              }
            },
            {
              variant: [
                'outline',
                'subtle'
              ],
              to: true,
              highlight: false,
              class: {
                root: 'has-[>a:focus-visible]:ring-primary'
              }
            },
            {
              variant: 'ghost',
              to: true,
              class: {
                root: 'hover:bg-elevated/50'
              }
            },
            {
              highlightColor: 'primary',
              highlight: true,
              class: {
                root: 'ring-primary'
              }
            },
            {
              highlightColor: 'neutral',
              highlight: true,
              class: {
                root: 'ring-inverted'
              }
            },
            {
              spotlightColor: 'primary',
              spotlight: true,
              class: {
                root: '[--spotlight-color:var(--ui-primary)]'
              }
            },
            {
              spotlightColor: 'secondary',
              spotlight: true,
              class: {
                root: '[--spotlight-color:var(--ui-secondary)]'
              }
            },
            {
              spotlightColor: 'success',
              spotlight: true,
              class: {
                root: '[--spotlight-color:var(--ui-success)]'
              }
            },
            {
              spotlightColor: 'info',
              spotlight: true,
              class: {
                root: '[--spotlight-color:var(--ui-info)]'
              }
            },
            {
              spotlightColor: 'warning',
              spotlight: true,
              class: {
                root: '[--spotlight-color:var(--ui-warning)]'
              }
            },
            {
              spotlightColor: 'error',
              spotlight: true,
              class: {
                root: '[--spotlight-color:var(--ui-error)]'
              }
            },
            {
              spotlightColor: 'neutral',
              spotlight: true,
              class: {
                root: '[--spotlight-color:var(--ui-bg-inverted)]'
              }
            }
          ],
          defaultVariants: {
            variant: 'outline',
            highlightColor: 'primary',
            spotlightColor: 'primary'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

PageBody

The main content of your page.

PageColumns

A responsive multi-column layout system for organizing content side-by-side.