Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

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.