Cuadrículas de tarjetas

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

Preview

Estrellas

Sirius, Vega, Betelgeuse

Lunas

Io, Europa, Ganymede

Importación

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

Uso

Agrupar tarjetas

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

MDX

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>

Markdoc

{% 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 %}

Preview

Revisa esto

Contenido interesante que deseas destacar.

Otra caracaterística

Más información que deseas compartir.

Agrupar tarjetas de enlace

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

MDX

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

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

Markdoc

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

{% linkcard title="Componentes" href="/es/components/using-components/" /%}
{% /cardgrid %}

Preview

Creación de contenido en Markdown

Componentes

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.

MDX

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>

Markdoc

{% cardgrid stagger=true %}
{% 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 %}

Preview

Revisa esto

Contenido interesante que deseas destacar.

Otra característica

Más información que deseas compartir.

Props de <CardGrid>

Implementación: CardGrid.astro

El componente <CardGrid> acepta las siguientes propiedades:

stagger

tipo: boolean

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