Saltearse al contenido
Starlight

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.

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


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

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


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