Tarjetas

Para mostrar contenido en una caja que coincida con los estilos de Starlight, usa el componente <Card>.

Preview

Lunas

Io, Europa, Ganymede

Importación

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

Uso

Muestra una tarjeta usando el componente <Card> y proporciona un title para la tarjeta.

MDX

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

<Card title="Revisa esto">Contenido interesante que deseas destacar.</Card>

Markdoc

{% card title="Revisa esto" %}
Contenido interesante que deseas destacar.
{% /card %}

Preview

Revisa esto

Contenido interesante que deseas destacar.

Agregar iconos a las tarjetas

Incluye un icono en una tarjeta usando el atributo icon establecido en el nombre de uno de los iconos integrados de Starlight.

MDX

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

<Card title="Estrellas" icon="star">
  Sirius, Vega, Betelgeuse
</Card>

Markdoc

{% card title="Estrellas" icon="star" %}
Sirius, Vega, Betelgeuse
{% /card %}

Preview

Estrellas

Sirius, Vega, Betelgeuse

Agrupar tarjetas

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

Props de <Card>

Implementación: Card.astro

El componente <Card> acepta las siguientes propiedades:

title

requerido
tipo: string

El título de la tarjeta a mostrar.

icon

tipo: string

Una tarjeta puede incluir un atributo icon establecido en el nombre de uno de los iconos integrados de Starlight.