LinkCard

A card that is clickable as a whole, as a link or an action.

Soon

1<template>2  <LinkCard to="/design-system/foundations/colors">3    <span class="heading-04-medium text-text-primary">Colors</span>4  </LinkCard>5</template>

Props

Name	Type	Default
to	string	-
onClick (via v-on, not a declared prop)	() => void	-
title	string	-
subtitle	string	-
tooltip	string	-
tooltipLabel	string	-
icon	string	-

Slots

Name	Description
header-actions	Same as Card's header-actions slot, but ignored (with a dev warning) when the card has `to` or `@click` - an action nested inside the card's own link/button root is invalid markup and its click bubbles into the card's.
default	Body content. Any internal layout/gap is the caller's own wrapper div inside this slot, same as Card.
body	Same as Card's body slot - an explicit name for the default slot, ignored when a default slot is also passed.
footer	Optional action row at the bottom of the card, same as Card's footer slot.

Guidelines

Do

Use it for a card whose whole surface is interactive - a category tile that navigates, or a tile that triggers an in-place action like copy-to-clipboard.
Pass to for navigation (renders as a real link); pass a plain @click with no to for an in-place action (renders as a native button); omit both for a non-interactive card (e.g. a "coming soon" tile).
Put internal layout/spacing on your own wrapper div inside the default slot, same as Card.

Same title/subtitle/icon header props and footer slot as Card - see card.md. Like Card, there is no raw header slot.

Don't

Don't use it for a card that just displays content with no interaction - use Card instead.
Don't reach for :ui/class to change its background, border, corners, or padding - same fixed look as Card.
Don't pass tooltip or #header-actions to a LinkCard that has to or @click - the whole surface is already the control, and a button nested inside it is invalid markup. Both are ignored there (with a dev warning); they only render on a non-interactive LinkCard.