PageCard
Um componente de card pré-estilizado que exibe um título, descrição e link opcional.
Uso
O componente PageCard oferece uma maneira flexível de exibir conteúdo em um card, com uma ilustração no slot padrão.
Tailwind CSS
O Nitro UI se integra à versão mais recente do Tailwind CSS, trazendo melhorias significativas.
Título
Use a prop title para definir o título do card.
Tailwind CSS
<template>
<NPageCard title="Tailwind CSS" />
</template>
Descrição
Use a prop description para definir a descrição do card.
Tailwind CSS
Nitro UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro UI integrates with latest Tailwind CSS, bringing significant improvements."
/>
</template>
Ícone
Use a prop icon para definir o ícone do card.
Tailwind CSS
Nitro UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro UI integrates with latest Tailwind CSS, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
/>
</template>
Link
Você pode passar qualquer propriedade do componente <NuxtLink>, como to, target, rel, etc.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro UI integrates with latest Tailwind CSS, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
to="https://tailwindcss.com/docs/v4-beta"
target="_blank"
/>
</template>
Variante
Use a prop variant para alterar o estilo do card.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro UI integrates with latest Tailwind CSS, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
to="https://tailwindcss.com/docs/v4-beta"
target="_blank"
variant="soft"
/>
</template>
Você pode aplicar a classe
light ou dark ao slot links ao usar a variante solid para inverter as cores.Orientação
Use a prop orientation para alterar a orientação com o slot padrão. O padrão é vertical.
Tailwind CSS
Nitro UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro 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" />
</NPageCard>
</template>
Invertido
Use a prop reverse para inverter a orientação do slot padrão.
Tailwind CSS
Nitro UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro 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" />
</NPageCard>
</template>
Destaque
Use as props highlight e highlight-color para exibir uma borda destacada ao redor do card.
Tailwind CSS
Nitro UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro 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" />
</NPageCard>
</template>
Destaque
Use as props spotlight e spotlight-color para exibir um efeito de holofote que acompanha o cursor do mouse e destaca as bordas no hover.
O efeito de holofote assume o lugar dos efeitos de hover ao usar uma prop
to. É melhor usá-lo com a variante outline.Tailwind CSS
Nitro UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<NPageCard
title="Tailwind CSS"
description="Nitro 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" />
</NPageCard>
</template>
Você também pode personalizar a cor e o tamanho usando as variáveis CSS
--spotlight-color e --spotlight-size:<template>
<NPageCard spotlight class="[--spotlight-color:var(--ui-error)] [--spotlight-size:200px]" />
</template>
Exemplos
Como depoimento
Use o componente User no slot header ou footer para dar ao card a aparência de um depoimento.
“Nuxt on Cloudflare infra with minimal effort - this is huge!”
Evan You
Autor do Vue.js e do Vite
Você pode usar o componente
PageColumns para exibir vários PageCard em um layout de múltiplas colunas.API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
icon | anyThe 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" | "accent" | "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" | "accent" | "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 | {} |
Tema
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: '',
accent: '',
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: '',
accent: '',
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: 'accent',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-accent)]'
}
},
{
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 '@nitro/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: '',
accent: '',
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: '',
accent: '',
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: 'accent',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-accent)]'
}
},
{
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'
}
}
}
})
]
})
Changelog
No recent changes