Grids

Principio: la Card base resuelve estructura. Los modificadores resuelven responsabilidades concretas y pueden componerse entre sí. No crear variantes por tipo de contenido cuando el problema ya está cubierto por una responsabilidad existente.

kitlu-card: estructura base.
kitlu-card–balanced: equilibra títulos y extractos variables; desde L reserva hasta 3 líneas de título y limita el resumen a 4; en XS/S/M no se recorta el texto.
kitlu-card–divided: cierre inferior ligero con padding y borde punteado semántico.
kitlu-card–surface / –accent: tratamiento visual de superficie.
kitlu-card–listing: composición vertical en XS/S/M y horizontal desde L.
kitlu-card__media–contain: media de proporción imprevisible sin recorte ni deformación.

Composiciones validadas: kitlu-card + balanced + divided para Card editorial abierta; kitlu-card + surface para Card con superficie; kitlu-card + surface + listing y kitlu-card__media + media–contain para listados de recursos/documentos con imagen imprevisible.

Normalizar el espacio de presentación, no la geometría del contenido.

En XS/S/M, el media well conserva 24rem de altura y centra la imagen; el propio img.brxe-image debe mantener width:auto y height:auto, con max-width:20rem y max-height:100%. Nunca aplicar height:100% al img: en Bricks el propio img es el elemento .brxe-image y esa regla deforma imágenes con relaciones de aspecto no estándar.

Desde L, el media well pasa a 24rem × 30rem, la Card adopta disposición horizontal y la imagen puede usar hasta el 100% del ancho disponible, siempre con proporción preservada y contain.

No duplicar en estilos locales comportamientos ya cubiertos por estas clases. No añadir recortes obligatorios al media imprevisible. No trasladar el comportamiento de balanced a la Card base. No usar divided como decoración cuando una superficie ya delimita claramente la Card. Mantener los estilos fundacionales en XS/Base y usar breakpoints solo para cambios estructurales.

Principio: un patrón de listado describe la relación y jerarquía entre varias unidades de contenido. No sustituye a kitlu-grid, que resuelve geometría, ni a kitlu-card, que resuelve la unidad de contenido. El patrón se compone con ambos y no debe introducir responsabilidades que ya pertenezcan a la Card.

Uso: listados editoriales en los que el primer resultado necesita una jerarquía mayor que los siguientes sin convertirse en otro tipo de Card.

Composición validada: kitlu-grid + kitlu-grid--3 + kitlu-listing--featured-first en el wrapper; el elemento que lleva el Query Loop sigue siendo una kitlu-card.

La geometría de columnas procede de kitlu-grid–3. El patrón modifica únicamente la relación entre resultados: la primera Card recibe borde y padding semánticos, título de mayor jerarquía y ocupación destacada de la retícula. En L ocupa toda la fila; desde XL pasa a span 2 en columnas y filas.

La implementación validada admite dos elementos kitlu-card__summary en la Card: un resumen corto y un texto largo. El patrón oculta los summaries secundarios y muestra el último summary únicamente en la primera Card. No ligar este comportamiento a IDs de Bricks ni convertirlo en una variante de kitlu-card.

Uso: listados de alta densidad visual para últimas noticias, relacionados, actualidad, sidebar y contextos donde solo hacen falta título enlazado y una línea de metadata.

Composición validada: wrapper kitlu-listing--compact; cada resultado usa kitlu-card + kitlu-card--divided y contiene únicamente kitlu-card__main con kitlu-card__title enlazado y kitlu-card__meta.

No requiere imagen, excerpt, body, botón ni kitlu-card--balanced. La variación de longitud de título no rompe una alineación horizontal porque las unidades se apilan verticalmente. En XS/S/M el listado ocupa el ancho disponible; desde L se limita a 36rem para comportarse como una columna lateral compacta.

La metadata base debe ser textual y neutra. Iconos, fondos o tratamientos particulares de fecha pertenecen a una decisión visual específica del proyecto y no forman parte obligatoria del patrón.

No crear variantes de Card para resolver jerarquías que pertenecen al listado. Mantener el Query Loop en el elemento que representa cada resultado, no en el wrapper estático del listado. Reutilizar la API semántica kitlu-card* en los selectores del patrón y evitar dependencias de IDs de Bricks. Mantener en XS/Base los estilos fundacionales y usar breakpoints solo para cambios estructurales. No duplicar como estilos locales comportamientos ya consolidados en kitlu-listing--featured-first o kitlu-listing--compact.