卡片
将您的内容与其他页面链接的卡片。
用法
使用 title 和 icon 属性在您的内容中显示卡片组件，描述将使用完整的 markdown 支持在默认插槽中显示。
组件
探索 Nuxt UI Pro 中提供的所有组件。
::card{title="Components" icon="i-heroicons-cube-transparent"}
Discover all the components available in **Nuxt UI Pro**.
::
颜色
您可以使用 color 属性更改卡片的颜色
组件
探索 Nuxt UI Pro 中提供的所有组件。
::card{title="Components" icon="i-heroicons-cube-transparent" color="red"}
Discover all the components available in **Nuxt UI Pro**.
::
链接
您可以添加 to 属性使其成为链接，链接为外部链接时将显示一个外部图标
::card
---
title: Components
icon: i-heroicons-cube
to: https://nuxtjs.org.cn/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
属性
icon
字符串
未定义color
字符串
"primary"to
字符串
未定义target
字符串
未定义ui
任何
{}配置
{
wrapper: 'relative group overflow-hidden flex items-center rounded-lg',
to: 'hover:ring-1 hover:ring-[--color-light] dark:hover:ring-[--color-dark] hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
icon: {
base: 'w-6 h-6 mb-4 inline-flex items-center text-[--color-light] dark:text-[--color-dark] pointer-events-none'
},
body: {
base: 'flex-1'
},
externalIcon: {
name: appConfig.ui.icons.external,
base: 'w-4 h-4 absolute right-2 top-2 text-gray-400 dark:text-gray-500 group-hover:text-[--color-light] dark:group-hover:text-[--color-dark]'
},
title: 'text-gray-900 dark:text-white font-semibold text-base my-0',
description: 'text-[15px] text-gray-500 dark:text-gray-400 mt-1 mb-0'
}