Card - Nuxt UI Pro

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**.
::

Link

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"

string

undefined

target

string

undefined

{}

{}

Callout

A callout to add eye-catching context to your content.

CardGroup

Group cards together in a grid.