Cuadrículas de Tarjetas

Para envolver múltiples componentes <Card> o <LinkCard> en una cuadrícula, usa el componente <CardGrid>.

Importación

Importar componentes

import { CardGrid } from "@astrojs/starlight/components";

Uso

Muestra varios componentes <Card> uno al lado del otro cuando hay suficiente espacio agrupándolos con el componente <CardGrid>.

Uso de CardGrid

import { Card, CardGrid } from "@astrojs/starlight/components";

<CardGrid>
  <Card title="Revisa esto" icon="open-book">
    Contenido interesante que deseas destacar.
  </Card>
  <Card title="Otra caracaterística" icon="information">
    Más información que deseas compartir.
  </Card>
</CardGrid>;

Revisa esto

Contenido interesante que deseas destacar.

Otra caracaterística

Más información que deseas compartir.

Tarjetas escalonadas

Cambia la segunda columna de la cuadrícula verticalmente para agregar interés visual agregando el atributo stagger al componente <CardGrid>.

Este atributo es útil en tu página de inicio para mostrar las características clave de tu proyecto.

Uso de stagger

import { Card, CardGrid } from "@astrojs/starlight/components";

<CardGrid stagger>
  <Card title="Revisa esto" icon="open-book">
    Contenido interesante que deseas destacar.
  </Card>
  <Card title="Otra característica" icon="information">
    Más información que deseas compartir.
  </Card>
</CardGrid>;

Revisa esto

Contenido interesante que deseas destacar.

Otra característica

Más información que deseas compartir.

Props de <CardGrid>

El componente <CardGrid> acepta las siguientes propiedades:

stagger

tipo: boolean

Define si se deben escalonar las tarjetas en la cuadrícula o no.