Link Cards
To display links to different pages prominently, use the <LinkCard>
component.
Import
Usage
Display a link prominently using the <LinkCard>
component.
Each <LinkCard>
requires a title
and an href
attribute.
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.