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
be•nev•o•lent
adjective
well meaning and kindly.
"a benevolent smile"
Word of the Day
be•nev•o•lent
adjective
well meaning and kindly.
"a benevolent smile"
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.
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:
⚠ Cuando
component="img", CardMedia depende deobject-fitpara centrar la imagen. No es compatible con 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.
Live From Space
Mac Miller
Personalización
🎨 Si estás buscando inspiración, puedes revisar los ejemplos de MUI Treasury.