---
id: cards-escudo
status: proposed
kind: new
sprint: 5

target:
  block: acf/cards-escudo
  based_on: sek-cert
  see: https://institucioneducativaseki5.sg-host.com/bienvenida/

evidence:
  used_in:
    - output/pages/sek-schools/educacion-infantil.html
  figma: "922:39254"

fields:
  - { name: overtitle, type: text }
  - { name: title,     type: text }
  - { name: content,   type: wysiwyg }
  - { name: links,     type: repeater, required: false, max: 2 }
  - { name: cards,     type: repeater, min: 3, max: 6, sub: [
        { name: overtitle, type: text, note: "etiqueta corta sobre el título" },
        { name: title,     type: text },
        { name: media,     type: image, required: false, note: "logo o icono, en la mitad inferior" },
      ] }
  - { name: side, type: select, choices: [left, right], default: left, label: "Lado de la rejilla" }

tokens: [border-static-hairline, text-static-primary, text-static-secondary]

behaviour:
  - Rejilla de tarjetas **escudo** a un lado y bloque de texto al otro
  - Las tarjetas van **escalonadas**: cada columna arranca un poco más abajo que la anterior
  - Cada tarjeta tiene dos mitades: arriba overtitle y título; abajo el logo o el icono, centrado
  - La tarjeta mantiene su proporción aunque el título ocupe una o dos líneas
  - En móvil, la rejilla pasa a dos columnas y pierde el escalonado

accept:
  - Con 3 y con 6 tarjetas el escalonado se mantiene y no deja huecos sueltos al final
  - Sin `media`, la mitad inferior no colapsa: la tarjeta conserva su alto
  - Un título de dos líneas no desplaza la mitad inferior respecto a sus vecinas
  - En 375 no hay scroll horizontal y las tarjetas siguen siendo legibles

built:
  branch:
  commit:
  notes:
---

# Tarjetas escudo en rejilla (Card/Shield)

Rejilla de tarjetas con forma de escudo —etiqueta y título arriba, logo o icono abajo—
escalonadas, con un bloque de texto al lado. Figma `922:39254`.

El sistema tiene `sek-cert`, que es lo más parecido, pero es un **carrusel de logos sueltos**:
no tiene la tarjeta con dos mitades, ni texto en la tarjeta, ni el escalonado, ni la
composición con el bloque de contenido al lado.

## Dónde se pide

En **Educación Infantil**, para "Preparados para dar el siguiente paso": las competencias con
las que el alumno llega a Primaria. Hoy va como rejilla de datos con icono, que resuelve la
lectura pero pierde el formato de tarjeta que pide UX.

## Casuística

El escalonado es lo que hace que la rejilla no se lea como una tabla. Conviene que sea parte
del componente y no algo que se apañe en cada instancia: con un número impar de tarjetas, la
última columna debe seguir el mismo ritmo.