Tipo 01
Estándar
Todas del mismo tamaño en filas y columnas.
Componentes Listas de imágenes
Listas de imágenes
Las listas de imágenes muestran una colección de fotos en una cuadrícula ordenada. Hay cuatro estilos según el efecto que buscas.
Uso
Úsalas para galerías, portafolios o catálogos donde la imagen es lo principal.
- Galerías y portafolios
- Catálogos donde la foto decide
- Contenido con mucho texto: usa tarjetas
- Imágenes de calidad muy distinta
Principios
1
La imagen manda
Poco texto, mucha imagen.
2
Ritmo
Espacios iguales entre fotos.
3
Tamaños con sentido
Las fotos más importantes pueden ser más grandes.
Tipos
Tipo 02
Mosaico (quilted)
Algunas ocupan dos celdas para dar jerarquía.
Tipo 03
Entretejida (woven)
Alturas que alternan, con un ritmo de tejido.
Tipo 04
Mampostería (masonry)
Cada imagen conserva su proporción; las columnas tienen alturas distintas.
Anatomía
- Contenedor
- Imagen
- Texto (opcional, debajo o sobre la imagen)
Comportamiento
- Tocar una imagen suele abrirla en grande (visor o lightbox).
- En celular la cuadrícula baja a 2 columnas; en escritorio sube a 3 o 4.
- Las imágenes se cargan en diferido (loading="lazy") para no hacer lenta la página.
Medidas
| Medida | Valor de referencia |
|---|---|
| Espacio entre imágenes | 4 a 8 dp |
| Columnas | 2 (celular) a 4 (escritorio) |
| Texto sobre imagen | franja de 48 a 68 dp con degradado |
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
Texto alternativo
Cada imagen con alt que describa su contenido.
Orden
El orden de lectura sigue filas, aunque sea mampostería.
Navegable
Si se pueden abrir, deben ser enlaces o botones.