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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, sequi?

Título de ejemplo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, sequi?

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>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Earum, sequi?
             </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