BentoCaseCell

Celda de caso de estudio: cover con título sobre scrim y vídeo opcional en hover

stable v1.0.0

Preview

Componente real del canon dentro de un BentoGrid real. En desktop, pasa el ratón por la primera celda: el vídeo aparece en fade (el hook [data-bento-case] lo activa esta página, igual que la home de 3lastic.com: el componente pone markup y estilo, la página decide cuándo). La celda sin href renderiza <article> estático.

Props

PropTipoNota
titlestringRequerida. Único texto de la celda; también nombre accesible.
coverstringRequerida. Imagen de fondo full-bleed.
hrefstringOpcional: con href es <a> clickable; sin él, <article> estático.
thumbstringOpcional. Sustituye a cover como fondo si existe.
videostringOpcional. Se revela en hover vía .is-video-active (desktop).
span1 | 2Columnas del grid. Default 1.
layout'bento' | 'grid'bento = retrato 1/2 (home); grid = apaisada 3/2 (índice de casos).

Comportamiento

SituaciónComportamiento
Hover/focus (desktop, clickable)Label sube de 0.8 a opacidad completa; si hay vídeo, fade in al activarse .is-video-active
Celda estáticaLabel siempre a opacidad completa
Mobile (<768px)Todas a span 1, min-height 300px, scrim y label siempre visibles
prefers-reduced-motionTransiciones de vídeo y label desactivadas

Tokens

PropiedadToken
Color del label--color-on-media
Base del gradiente del scrim--media-scrim
Tipografía del label--font-heading, --text-card-title, --weight-semibold
Inset del label--space-lg

Restricciones

  • El título es el único texto. Sin descripción, sin metadata.
  • Una cover; un vídeo opcional. Sin carruseles.
  • El script de activación del vídeo vive en la página consumidora (apunta a [data-bento-case]), no en el componente.

Decisiones

DecisiónPor qué
href opcional (a vs article)Items de listado sin página de detalle también renderizan; misma convención que Card
Scrim + label blanco por tokensLegibilidad del título sobre imaginería arbitraria, independiente del tema
La página posee el hook del vídeoEl timing/observer de activación difiere por página; el componente es markup + estilo
Promovido de elastic + teresaFunción idéntica en dos sitios; la forma con href opcional (de teresa) es la canónica