Tarjetas de enlace

Para mostrar enlaces a diferentes páginas de forma destacada, utiliza el componente <LinkCard>.

Preview

Personalización de Starlight Aprende a personalizar tu sitio de Starlight con estilos personalizados, fuentes y más.

Importación

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

Uso

Mostrar un enlace de forma destacada utilizando el componente <LinkCard>. Cada <LinkCard> requiere un atributo title y un atributo href.

MDX

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

<LinkCard
  title="Creación de contenido en Markdown"
  href="/es/guides/authoring-content/"
/>

Markdoc

{% linkcard title="Creación de contenido en Markdown" href="/es/guides/authoring-content/" /%}

Preview

Creación de contenido en Markdown

Agregar una descripción de enlace

Agrega una descripción breve a una tarjeta de enlace utilizando el atributo description.

MDX

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

<LinkCard
  title="Internacionalización"
  href="/es/guides/i18n/"
  description="Configura Starlight para admitir varios idiomas."
/>

Markdoc

{% linkcard
   title="Internacionalización"
   href="/es/guides/i18n/"
   description="Configura Starlight para admitir varios idiomas." /%}

Preview

Internacionalización Configura Starlight para admitir varios idiomas.

Agrupar tarjetas de enlace

Muestra varias tarjetas de enlace una al lado de la otra cuando hay suficiente espacio agrupándolas con el componente <CardGrid>. Ve la guía “Agrupar tarjetas de enlace” para un ejemplo.

Props de <LinkCard>

Implementación: LinkCard.astro

El componente <LinkCard> acepta las siguientes propiedades, así como todos los demás atributos de los elementos <a>:

title

requerido
tipo: string

El título de la tarjeta de enlace a mostrar.

href

requerido
tipo: string

El URL al que enlazar cuando se interactúa con la tarjeta.

description

tipo: string

Una descripción opcional para mostrar debajo del título.