LinkedCard

A styled card component that wraps navigation links, useful for creating visually appealing navigation to related pages or external resources.

Usage

Use the ::LinkedCard MDC syntax with a to or href attribute:

::LinkedCard{to="/docs/getting-started"}
**Getting Started**

Learn the basics of using the documentation layer.
::

Getting Started

Learn the basics of using the documentation layer.

Internal Links

For internal pages, use the to attribute:

::LinkedCard{to="/docs/components/button"}
**Button Component**

Explore button variants and usage patterns.
::

External Links

For external URLs, use the href attribute with target="_blank":

::LinkedCard{href="https://nuxt.com" target="_blank"}
**Nuxt Documentation**

Visit the official Nuxt documentation.
::

Multiple Cards

Create a grid of cards using markdown:

::LinkedCard{to="/docs/components/callout"}
**Callout**

Display alerts and notifications.
::

::LinkedCard{to="/docs/components/tabs"}
**Tabs**

Organize content in tabbed sections.
::

::LinkedCard{to="/docs/components/steps"}
**Steps**

Create step-by-step guides.
::

Props

The component accepts all NuxtLink props:

Prop	Type	Default	Description
`to`	`string \| RouteLocation`	-	Internal route destination
`href`	`string`	-	External URL
`target`	`string`	-	Link target (`_blank`, etc.)
`class`	`string`	-	Additional CSS classes

Slots

Slot	Description
`default`	Card content (supports markdown)

Styling

The component provides:

Surface background color with hover effect
Rounded corners with padding
Centered flex layout
Smooth transition animations