Menú

Card

El componente Card es un contenedor flexible y visualmente atractivo diseñado para presentar contenido relacionado de manera organizada y destacada.

El componente card se compone de subcomponentes: CardContent, CardMedia y CardSpacing. Cada uno tiene su posicion y su función.

Título de ejemplo

Contenido de ejemplo dentro de un CardSpacing, ideal para una breve descripción o resumen.

Título de ejemplo

Contenido de ejemplo dentro de un CardSpacing, ideal para una breve descripción o resumen.

La etiqueta Card por si sola presenta elevación mediante sombra y estilos de caja, pero no comporta padding por ejemplo.

Para el padding tenemos la etiqueta CardSpacing como se ve en el ejemplo



<Card shadow="big">
    <CardContent>
        <CardMedia
          height={250}
          src="/img/debord6.webp"
          alt="imagen de ejemplo para tarjeta"
        />
        <CardSpacing>
          <Title variant="h3">Texto de ejemplo</Title>
             <Text>
                Contenido de ejemplo dentro de un CardSpacing.
             </Text>
        </CardSpacing>
    </CardContent>
    <CardSpacing>
        <Button variant="fill" rounded="medium" shadow="medium">
         Action
        </Button>
    </CardSpacing>
</Card>

El componente 'Card' esta configurado para ser 'flex flex-col justify-between', por tanto la estructura de componente debe ser de dos elementos hijos. Un elemento 'CardContent'y un elemento 'CardSpacing' reservado para las acciones