Use markdown no slot padrão do componente card para destacar seu conteúdo.
Use as props title, icon e color para personalizá-lo. Você também pode passar qualquer propriedade do componente <NuxtLink> ou <RouterLink>.
::card{title="Startup" icon="i-lucide-users" color="primary" to="https://nuxt.lemonsqueezy.com" target="_blank"}
Best suited for small teams, startups and agencies with up to 5 developers.
::
| Prop | Default | Type |
|---|---|---|
to | string | it | et | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
icon | any | |
title | string | |
description | string | |
color | 'primary' | "error" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "neutral" |
ui | { base?: SlotClass; icon?: SlotClass; title?: SlotClass; description?: SlotClass; externalIcon?: SlotClass; } |
| Slot | Type |
|---|---|
default | {} |
title | {} |
export default defineAppConfig({
ui: {
prose: {
card: {
slots: {
base: [
'group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default',
'transition-colors'
],
icon: 'size-6 mb-2 block',
title: 'text-highlighted font-semibold',
description: 'text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1',
externalIcon: [
'size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none',
'transition-colors'
]
},
variants: {
color: {
primary: {
icon: 'text-primary'
},
secondary: {
icon: 'text-secondary'
},
accent: {
icon: 'text-accent'
},
success: {
icon: 'text-success'
},
info: {
icon: 'text-info'
},
warning: {
icon: 'text-warning'
},
error: {
icon: 'text-error'
},
neutral: {
icon: 'text-highlighted'
}
},
to: {
true: ''
},
title: {
true: {
description: 'mt-1'
}
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
base: 'hover:bg-primary/10 hover:border-primary outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
externalIcon: 'group-hover:text-primary'
}
},
{
color: 'neutral',
to: true,
class: {
base: 'hover:bg-elevated/50 hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-inverted',
externalIcon: 'group-hover:text-highlighted'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
card: {
slots: {
base: [
'group relative block my-5 p-4 sm:p-6 border border-default rounded-md bg-default',
'transition-colors'
],
icon: 'size-6 mb-2 block',
title: 'text-highlighted font-semibold',
description: 'text-[15px] text-muted *:first:mt-0 *:last:mb-0 *:my-1',
externalIcon: [
'size-4 align-top absolute right-2 top-2 text-dimmed pointer-events-none',
'transition-colors'
]
},
variants: {
color: {
primary: {
icon: 'text-primary'
},
secondary: {
icon: 'text-secondary'
},
accent: {
icon: 'text-accent'
},
success: {
icon: 'text-success'
},
info: {
icon: 'text-info'
},
warning: {
icon: 'text-warning'
},
error: {
icon: 'text-error'
},
neutral: {
icon: 'text-highlighted'
}
},
to: {
true: ''
},
title: {
true: {
description: 'mt-1'
}
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
base: 'hover:bg-primary/10 hover:border-primary outline-primary/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-primary',
externalIcon: 'group-hover:text-primary'
}
},
{
color: 'neutral',
to: true,
class: {
base: 'hover:bg-elevated/50 hover:border-inverted outline-inverted/25 has-[>a:focus-visible]:outline-3 has-[>a:focus-visible]:border-inverted',
externalIcon: 'group-hover:text-highlighted'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
}
})
]
})