Saltar al contenido

🎉 Material UI v5 is out now! Check out the announcement blog post

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

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

Tarjeta con bordes

Usa variant="outlined" para mostrar una tarjeta con bordes.

Word of the Day

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

Interacción compleja

En desktop, el contenido de las tarjetas puede expandirse.

R
Shrimp and Chorizo PaellaSeptember 14, 2016

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.

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:

⚠ Cuando component="img", CardMedia depende de object-fit para 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.