---
id: content-feature-list
status: proposed
kind: new
sprint: 5

target:
  block: acf/content-feature-list
  based_on: sek-doble-card
  see: https://institucioneducativaseki5.sg-host.com/donde-sucede-el-aprendizaje/

evidence:
  used_in:
    - output/pages/sek-schools/educacion-infantil.html
    - output/pages/sek-schools/residencias.html
  figma: "669:45238"

fields:
  - { name: overtitle, type: text }
  - { name: title,     type: text }
  - { name: content,   type: wysiwyg, note: "el ritmo del cuerpo es normal / destacado / normal" }
  - { name: links,     type: repeater, required: false, max: 2, sub: [
        { name: label, type: text },
        { name: url,   type: link },
      ] }
  - { name: media,     type: gallery, min: 1, max: 3, note: "una imagen, o dos o tres apiladas" }
  - { name: media_side, type: select, choices: [right, left], default: right, label: "Lado de la imagen" }

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

behaviour:
  - Dos columnas en escritorio: contenido a un lado, media al otro. Apiladas en móvil, siempre con el texto primero
  - `media_side` permite **alternar el lado** entre secciones consecutivas, que es como se usa cuando van varios seguidos
  - Con dos o tres imágenes, se apilan en la columna de media conservando la altura total del bloque
  - La línea del overtitle usa `border-static-disabled`
  - Los enlaces van pegados al final del contenido, no separados por el aire de una sección

accept:
  - Con `media_side: left` la imagen cambia de lado y en móvil el texto sigue yendo primero
  - Con una imagen y con tres, el bloque mantiene la misma altura de columna
  - El texto no supera las ~75 caracteres por línea en 1440
  - Sin enlaces, no queda hueco al final del contenido

built:
  branch:
  commit:
  notes:
---

# Contenido y media, a dos columnas (Content Feature List)

El módulo de referencia para **abrir sección después del hero**: overtitle con su línea,
titular, un par de párrafos, enlaces opcionales y la media al lado. Figma `669:45238`.

Hoy se monta con `sek-doble-card`, que publica la rejilla de dos columnas pero está pensado
para otra cosa: trae su propio copy, admite una sola imagen y no permite elegir el lado.

## Por qué el lado alternante

Es la petición concreta de UX: cuando se encadenan varias secciones de este tipo, la imagen
va cambiando de lado. Con el bloque actual habría que duplicarlo o tocar clases a mano en
cada instancia.

## Dónde se usa ya

- **Educación Infantil**, primer bloque tras el hero: el programa PEP y los dos ciclos.
- **Residencias**, acompañamiento a las familias, con los tres enlaces de recursos.

En ambos casos el texto sigue el ritmo normal / destacado / normal, así que el campo de
contenido tiene que admitir ese tratamiento del párrafo intermedio.