link-cards.mdx

title	description	sidebar
Link Cards	Learn how to display links prominently as cards in Starlight.	order 3

import { LinkCard } from '@astrojs/starlight/components';

To display links to different pages prominently, use the <LinkCard> component.

import Preview from '~/components/component-preview.astro';

Import

import { LinkCard } from '@astrojs/starlight/components';

Usage

Display a link prominently using the <LinkCard> component. Each <LinkCard> requires a title and an href attribute.

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />

{% linkcard title="Authoring Markdown" href="/guides/authoring-content/" /%}

Add a link description

Add a short description to a link card using the description attribute.

import { LinkCard } from '@astrojs/starlight/components';

<LinkCard
	title="Internationalization"
	href="/guides/i18n/"
	description="Configure Starlight to support multiple languages."
/>

{% linkcard
   title="Internationalization"
	 href="/guides/i18n/"
	 description="Configure Starlight to support multiple languages." /%}

Group link cards

Display multiple link cards side-by-side when there’s enough space by grouping them using the <CardGrid> component. See the “Group link cards” guide for an example.

<LinkCard> Props

Implementation: LinkCard.astro

The <LinkCard> component accepts the following props, as well as all other <a> element attributes:

title

required
type: string

The title of the link card to display.

href

required
type: string

The URL to link to when the card is interacted with.

description

type: string

An optional description to display below the title.