Link Cards

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

Preview

Customizing Starlight Learn how to make your Starlight site your own with custom styles, fonts, and more.

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.

MDX

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

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

Markdoc

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

Preview

Authoring Markdown

Add a link description

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

MDX

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

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

Markdoc

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

Preview

Internationalization Configure Starlight to support multiple languages.

Add a link icon

Include an icon in a link card using the icon attribute set to the name of one of Starlight’s built-in icons.

The iconPlacement attribute can be used to place the icon before the text by setting it to start (defaults to end).

MDX

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

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

Markdoc

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

Preview

Internationalization 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.

icon

type: string

A link card can include an icon attribute set to the name of one of Starlight’s built-in icons.

iconPlacement

type: 'start' | 'end' default: 'end'

Determines the placement of the icon in relation to the link card text.