Link Cards
To display links to different pages prominently, use the <LinkCard> component.
Customizing Starlight
Learn how to make your Starlight site your own with custom styles, fonts, and more.
Import
Section titled “Import”import { LinkCard } from '@astrojs/starlight/components';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/" /%}Authoring Markdown
Add a link description
Section titled “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." /%}Internationalization
Configure Starlight to support multiple languages.
Group link cards
Section titled “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
Section titled “<LinkCard> Props”Implementation: LinkCard.astro
The <LinkCard> component accepts the following props, as well as all other <a> element attributes:
required
type: string
The title of the link card to display.
required
type: string
The URL to link to when the card is interacted with.
description
Section titled “description”type: string
An optional description to display below the title.