Card

A card to link your content with other pages.

Usage

Use the title and icon props to display a card component in your content, the description will be displayed in the default slot with full markdown support.

Components

Discover all the components available in Nuxt UI Pro.

::card{title="Components" icon="i-heroicons-cube-transparent"}
Discover all the components available in **Nuxt UI Pro**.
::

Color

You can use the color prop to change the color of the card:

Components

Discover all the components available in Nuxt UI Pro.

::card{title="Components" icon="i-heroicons-cube-transparent" color="red"}
Discover all the components available in **Nuxt UI Pro**.
::

You can add a to prop to make it a link, an external icon will be displayed when the link is external:

Components

Explore Nuxt built-in components for pages, layouts, head, and more.

::card
---
title: Components
icon: i-heroicons-cube
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::

Props

icon
string
undefined
color
string
"primary"
to
string
undefined
target
string
undefined
ui
{}
{}