Перейти до вмісту
Starlight
Filters

    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

    Section titled “Import”
    import { LinkCard } from '@astrojs/starlight/components';

    Usage

    Section titled “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/" />
    Preview
    Authoring Markdown
    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."
    />
    Preview
    Internationalization Configure Starlight to support multiple languages.
    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:

    title

    Section titled “title”

    required
    type: string

    The title of the link card to display.

    href

    Section titled “href”

    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.