BentoCaseCell

Case study cell: cover with the title over a scrim and optional video on hover

stable v1.0.0

Preview

Static (no href): article

The real canon component inside a real BentoGrid. On desktop, hover over the first cell: the video fades in (the [data-bento-case] hook is activated by this page, just like the 3lastic.com home: the component provides markup and style, the page decides when). The cell without href renders a static <article>.

Props

Prop	Type	Note
`title`	string	Required. The cell's only text; also its accessible name.
`cover`	string	Required. Full-bleed background image.
`href`	string	Optional: with href it is a clickable <a>; without it, a static <article>.
`thumb`	string	Optional. Replaces cover as the background if present.
`video`	string	Optional. Revealed on hover via `.is-video-active` (desktop).
`span`	1 \| 2	Grid columns. Default 1.
`layout`	'bento' \| 'grid'	bento = portrait 1/2 (home); grid = landscape 3/2 (case index).

Behavior

Situation	Behavior
Hover/focus (desktop, clickable)	Label rises from 0.8 to full opacity; if there is a video, it fades in when `.is-video-active` is set
Static cell	Label always at full opacity
Mobile (<768px)	All at span 1, min-height 300px, scrim and label always visible
prefers-reduced-motion	Video and label transitions disabled

Tokens

Property	Token
Label color	--color-on-media
Scrim gradient base	--media-scrim
Label typography	--font-heading, --text-card-title, --weight-semibold
Label inset	--space-lg

Constraints

The title is the only text. No description, no metadata.
One cover; one optional video. No carousels.
The video activation script lives in the consuming page (it targets [data-bento-case]), not in the component.

Decisions

Decision	Why
Optional href (a vs article)	Listing items without a detail page still render; same convention as Card
Scrim + white label via tokens	Title legibility over arbitrary imagery, independent of the theme
The page owns the video hook	Activation timing/observer differs per page; the component is markup + style
Promoted from elastic + teresa	Identical function on two sites; the optional-href form (from teresa) is the canonical one