PageCard

サイトマップ
タイトル、説明、およびオプションのリンクを表示するスタイル付きのカードコンポーネント。

使用法

PageCardコンポーネントは、デフォルトスロットにイラストを含むカード内のコンテンツを柔軟に表示する方法を提供します。

Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
複数のPageCardを表示するには、PageGrid、PageColumnsまたはPageListコンポーネントを使用します。

Title

titleプロパティを使用してカードのタイトルを設定します。

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

Description

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

to、target、relなど、<NuxtLink>コンポーネントから任意のプロパティを渡すことができます。

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

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

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と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>
CSS変数--spotlight-colorと--spotlight-sizeを使用して色とサイズをカスタマイズすることもできます。
<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; }

スロット

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.