페이지카드 (PageCard)

Github (GitHub)
제목, 설명 및 선택적 링크를 표시하는 사전 스타일 카드 구성요소입니다.

Usage

PageCard 구성 요소는 카드의 내용을 기본 슬롯에 그림과 함께 표시하는 유연한 방법을 제공합니다.

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
PageGrid, PageColumns 또는 PageList 구성 요소를 사용하여 여러 PageCard를 표시합니다.

제목

title prop을 사용하여 카드의 제목을 설정합니다.

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

설명

description prop을 사용하여 카드 설명을 설정합니다.

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 prop을 사용하여 카드의 아이콘을 설정합니다.

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 Prop을 사용하여 카드 스타일을 변경합니다.

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 소품을 사용하여 기본 슬롯을 사용하여 방향을 변경합니다. 기본값은 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 Prop을 사용하여 기본 슬롯의 방향을 반대로 합니다.

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

예제

As 인증

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 (### 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; }

슬롯

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.

변경 로그

No recent changes

PageBody

The main content of your page.

PageColumns

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