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.
Deberían ser fáciles de visualizar sus acciones e información relevante. Los elementos como textos e imágenes deberían ubicarse de forma que indiquen jerarquía.
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.
Word of the Day
adjective
well meaning and kindly.
"a benevolent smile"
<Card variant="outlined">{card}</Card>Interacción compleja
En desktop, el contenido de las tarjetas puede expandirse. (Click the downward chevron to view the recipe.)
This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
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:
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
⚠ Cuando
component="img", CardMedia depende deobject-fitpara centrar la imagen. It's not supported by IE11.
Primary action
Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a CardActionArea component.
A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap.
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
🎨 Si estás buscando inspiración, puedes revisar los ejemplos de MUI Treasury.