BRAND Netflix 2026 · Recipe: top10-shelf

HEADER brand: Netflix; design_date: 2026-09; kind: component; used_in: Page: home S5 (Top 10 variant with rank numerals), Page: product-detail S5, S6, S8, S9 and genre rows (plain variant, grey pill paddles) evidence: measured on https://www.netflix.com/ and /title/80057281 (US) 2026-09-30 unless marked LOOK A horizontal row of tall 2:3 posters inside the content column. On home each poster carries a huge rank number (1-10) whose black-filled, white-outlined digits overlap the poster's lower-left corner and hang out into the gap before it. Hovering a poster enlarges it slightly above its neighbours. A slim rounded paddle at the right edge pages the row by a full view; after the first page a matching paddle appears on the left. STRUCTURE row wrapper (relative, radius 8px, overflow clip) -> ul (flex, overflow-x scroll, scrollbar hidden, scroll-snap-type x mandatory, scroll-margin-inline-start 2.5em) -> li (flex, no shrink, scroll-snap-align start, padding 8px 22px at 1440) -> button card (poster, radius 8px, bg #232323) + rank span (absolute, bottom-left, z-index 2) paddle wrappers (absolute, full row height, 36px wide incl. 12px left padding, bg #000000 on home) at the left and right edges, z-index 3 KEY PARAMETERS card shelf: posters 180x252 at 1440 (li 224px: 22px side padding), 214x300 at 1920, 140x196 at 1024, 112x157 below 960 (li padding 4.8px 10px); first poster starts at the content edge + 22px; 5 visible at 1440, 2.5 on mobile; row height 268px at 1440 poster: radius 8px (16px on LOCP rows), bg #232323 plus a dominant-color layer (e.g. #2a2a2a, #393939, #3c3c3c) under the image, image as background-size cover rank numeral: Netflix Sans 700, 100px/1 at 1440 (64 / 80 / 100 / 120px at xs / m / l / xxl), fill #000000 via a ::before copy, 4px #ffffff -webkit-text-stroke on the base layer (color #414141), text-shadow 0 0 24px rgba(0,0,0,0.5); the digit box starts at the li's left edge (22px left of the poster at 1440, so the digit overlaps the gap and the poster's lower-left corner) and its bottom sits 13px above the poster bottom (at 1440: poster 252px tall, digit box 100px tall, top at 139px from the poster top); "10" is twice as wide (122px) paddle (home): button 24x120, radius 8px, bg rgba(255,255,255,0.1), chevron 24px rgba(255,255,255,0.7), centered vertically, wrapper bg #000000 so it masks the posters under it paddle (LOCP): button 24x80, radius 256px, bg rgba(128,128,128,0.4), chevron white LOCP rows: right edge faded with mask linear-gradient(to left, transparent, #000 10%) scroll distance per click: one full visible width (5 posters at 1440); smooth scroll MOTION poster hover: transform scale(1) -> scale(1.05), z-index 2, 200ms ease-in-out; out same paddle hover and focus-visible: bg rgba(255,255,255,0.1) -> 0.2, chevron color 70% -> 100% white, 200ms ease-in-out paddle show/hide: wrapper transform translateX(-36px) (left) / translateX(36px) (right, est) and button opacity 0 -> 1, 400ms ease-in-out; the left paddle appears after the first page, the right one hides at the end (inf) paging: smooth scroll of the ul by one view width, snapping to li starts click on a poster: opens Recipe title-modal (home) or goes to the title page (LOCP) STATES hover: scale 1.05; focus-visible: 2px #ffffff outline offset 2px, radius 8px (12px at >=960, 16px at >=1920 on LOCP); touch: swipe scroll, no paddle needed (paddles still rendered); reduced motion: no scale, a 2px white outline on hover instead; loading: grey placeholder with dominant color HOW TO BUILD Flex list with overflow-x auto, hidden scrollbar and scroll-snap; posters as buttons with background images; rank digits as a two-layer text (stroked layer plus a black ::before copy via attr(data-content)); two absolutely positioned paddles that call scrollBy(view width) and toggle by scroll position. PITFALLS rank digits must be black with a white outline, not white; posters need the 8px radius and the 1.05 scale (not a lift or shadow); paddle is thin (24px) and dark, not a round arrow button; keep the #000 wrapper behind the home paddle so posters disappear under it; no scroll-reveal on the row SCREENSHOTS - file: netflix_2026_top10-shelf_d1440_hover.jpg shows: Top 10 row at 1440, card 2 hovered (scale 1.05), right paddle 24x120 - file: netflix_2026_top10-shelf_d1440_paged.jpg shows: after one paddle click: posters 6-10 visible, left paddle shown, right paddle still visible