Office avanzado
Diplomado de 120 horas.
Componentes Tarjetas
Tarjetas
Una tarjeta agrupa contenido y acciones sobre un solo tema: un curso, un producto, una noticia.
Power BI
Tableros de datos desde cero.
Uso
Úsalas cuando cada elemento tiene distintos tipos de información (imagen, texto, acciones) y se presentan en colección.
- Colecciones con imagen, texto y acción
- Elementos que llevan a una vista de detalle
- Listas simples de texto: usa una lista
- Tarjetas dentro de tarjetas
Principios
1
Un solo tema
Cada tarjeta habla de una sola cosa.
2
Escaneable
La información más importante va arriba.
3
Flexible
Puede tener solo algunas de sus partes.
Tipos
Elevada
Sombra de 1 dp.
Tipo 01
Elevada
Con sombra suave. Destaca sobre el fondo.
Delineada
Borde de 1 dp.
Tipo 02
Delineada
Con borde y sin sombra. Más sobria.
Con imagen
Tipo 03
Con imagen
La imagen arriba, en proporción 16:9.
Expandible
Toca la flecha.
Horario: martes y jueves, 6 a 9 p.m.
Tipo 04
Expandible
Muestra más información al tocar.
Anatomía
Office avanzado
Diplomado de 120 horas.
- Contenedor
- Imagen (opcional)
- Título y subtítulo
- Texto de apoyo
- Botones de acción
Comportamiento
Office avanzado
Diplomado de 120 horas.
Horario: martes y jueves, 6 a 9 p.m. Incluye certificado.
- Toda la tarjeta puede ser un enlace al detalle, o solo sus botones.
- Al pasar el mouse, la sombra aumenta para indicar que se puede tocar.
- Una tarjeta expandible crece hacia abajo y empuja las demás.
Medidas
| Medida | Valor de referencia |
|---|---|
| Radio de esquina | 4 dp |
| Elevación | 1 dp (8 dp al arrastrar) |
| Margen interno | 16 dp |
| Imagen | 16:9 o 1:1 |
| Espacio entre tarjetas | 8 a 16 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Un enlace por tarjeta
Si toda la tarjeta es clicable, no anides otros enlaces.
Título como encabezado
Usa h3 o h4 dentro de la tarjeta.
Texto alternativo
La imagen necesita alt si aporta información.