Saltar al contenido

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.

⚠️ Missing demo `pages/components/cards/SimpleCard.js` ⚠️

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"

<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.)

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.

Lizard

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:

Contemplative Reptile
Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

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

Live From Space
Mac Miller

Personalización

🎨 Si estás buscando inspiración, puedes revisar los ejemplos de MUI Treasury.