Designloop

Mosaico

Rectángulo de color de marca con una ilustración centrada. Acompaña a pasos y bloques de la landing.

Colores

Las ilustraciones animadas de producción se omiten en este ejemplo; el mosaico solo define el fondo, la proporción y el radio.

html · landing
<div style="flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
  <div class="tile tile-sand"></div>
  <div class="tile tile-sky"></div>
  <div class="tile tile-night"></div>
  <div class="tile tile-sage"></div>
  <div class="tile tile-clay"></div>
  <div class="tile tile-lilac"></div>
</div>

Piezas

Clase Qué hace
.tile Proporción 16:11, radio --radius-lg (24 px), recorta el contenido y lo centra.
.tile-sand, .tile-sky, .tile-sage, .tile-clay, .tile-lilac Fondo con el token --tile-* del mismo nombre.
.tile-night Fondo --night.

Reglas

Regla Cómo se comprueba
Siempre con una ilustración dentro; nunca con texto. En index.html cada .tile contiene un svg.ink.
La ilustración es decorativa. El svg lleva aria-hidden="true" y focusable="false".
Mosaicos vecinos, colores distintos. Los tres pasos usan sand, sky y night.

Diferencias observadas

  • tile-clay y tile-lilac existen en el CSS de la landing pero ninguna sección los usa hoy. El portal sí usa esos colores en las insignias.

Tokens que usa

--radius-lg--tile-sand--tile-sky--tile-sage--tile-clay--tile-lilac--night

Enlace con producción

SuperficieFuenteEstadoHuellaRevisada en
Landingpublic/site/styles.css
.tile .tile-sand .tile-sky .tile-sage .tile-clay .tile-lilac .tile-night
El archivo no existe en producción.
No está en producción——

Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.

Aviso: Clases de los ejemplos que no existen: tile, tile-sand, tile-sky, tile-night, tile-sage, tile-clay, tile-lilac

Relacionados

componentes/mosaico · Actualizado el 2026-10-11