LinkCard

A full-surface clickable card for linking to other pages or external resources.

<LinkCard> renders an entire card as a single link — correct for accessibility and providing a large click target. Use it to point readers to related pages, guides, or external resources.

Usage

import { LinkCard } from '@/components/mdx';

<LinkCard
  title="Installation"
  description="Get Dustavez running in under 5 minutes."
  href="/en/getting-started/installation"
/>

<LinkCard
  title="GitHub repository"
  href="https://github.com/codejumbo/dustavez"
  external
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Card heading (required)
`description`	`string`	—	Optional subtitle text
`href`	`string`	—	Link destination (required)
`external`	`boolean`	`false`	Adds `target="_blank"`, `rel="noopener noreferrer"`, and a ↗ indicator

Examples

Single card

Frontmatter reference

Every supported frontmatter field, with types and examples.

External link

Astro documentation↗

The framework powering Dustavez.

Grid of link cards

Combine with <CardGrid> for a two-column layout:

import { LinkCard, CardGrid } from '@/components/mdx';

<CardGrid>
  <LinkCard title="Installation" href="/en/getting-started/installation" description="Set up your project" />
  <LinkCard title="Configuration" href="/en/getting-started/configuration" description="Customize siteConfig" />
  <LinkCard title="Theming" href="/en/theming/color-tokens" description="Colors and fonts" />
  <LinkCard title="Deployment" href="/en/deployment/static-hosting" description="Ship to production" />
</CardGrid>

Note

<LinkCard> works inside any grid container. Use <CardGrid cols={1}> for a full-width single-column list.

Last updated: April 5, 2026

Edit this page on GitHub

← Previous

Icon

Colors & typography