Card (tarjeta)

Las tarjetas contienen información y acciones sobre un tema.

Las Tarjetas son superficies que muestran contenido y acciones sobre un tema particular.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Tarjeta simple

Aunque las tarjetas pueden permitir múltiples acciones, controles de la interfaz y varios menús, debemos usarlas con precaución ya que son puntos de ingreso a información mas detallada.

Outlined Card

Set variant="outlined" to render an outlined card.

Interacción compleja

En desktop, el contenido de las tarjetas puede expandirse.

Multimedia

Un ejemplo de una tarjeta usando una imagen para reforzar contenido.

Por defecto usamos una combinacion de un <div> y una imagen de fondo para mostrar contenido multimedia. Esto puede ser problemático en ciertas situaciones. Por ejemplo, tal vez queremos mostrar un vídeo o una imagen responsiva. En estos casos podemos usar la propiedad component:

⚠️ When component="img", CardMedia relies on object-fit for centering the image. It's not supported by IE 11.

Controles de IU

Acciones adicionales dentro de las tarjetas son iniciadas explícitamente usando iconos, texto y controles de IU, localizados de manera típica en el pie de la tarjeta.

Acá un ejemplo de una tarjeta con control multimedia.

Personalización

👑 If you are looking for inspiration, you can check MUI Treasury's customization examples.

API

• <Card />
• <CardActionArea />
• <CardActions />
• <CardContent />
• <CardHeader />
• <CardMedia />
• <Collapse />
• <Paper />