BRAND Apple 2026 · Recipe: card-gallery

HEADER brand: Apple; design_date: 2026-09; kind: component; used_in: Page: home S5 (variant A); Page: product-family S5 hero cards (variant B) and shelves S6-S9 (variant C) evidence: measured on www.apple.com 2026-09-24 and 2026-09-25: stylesheet rules and CSS custom properties, gallery script, Chrome DevTools at 1440x900 and 390x844, unless marked LOOK Large media glide sideways while neighbours peek in at the edges; captions of the neighbours are dimmed and brighten when their slide arrives. Navigation is a row of small dots; the current dot stretches into a short track that fills like a progress bar, then shrinks back when the slide changes. Shelves of rounded cards run past the right edge of the page and move with two small grey round paddles; cards grow slightly under the pointer. STRUCTURE Variant A (home media galleries): section headline on top; gallery 1: full-width row of large slides; gallery 2: row of small tiles 13px below; dot navigation with play/pause centered below. Variant B (product-family hero cards): row of large rounded cards starting at the content edge, dot pill and play/pause below. Variant C (shelves): row of narrow cards starting at the content edge and overflowing the viewport on the right, two paddles below at the right. KEY PARAMETERS Variant A, gallery 1: slides: 930x523 at 1069-1440; 1250x668 at 1441+; 688x367 at 735-1068; 275x496 at 734 and below gap between slides 13px; radius 0; slide bg #000000; current slide centered, previous and next visible at both edges caption at the slide bottom-left, padding (start / bottom): 70 / 58px at 1441+, 43 / 34px at 735-1068, 15 / 30px mobile (est for 1069-1440: 70 / 58px) caption order on one line: light pill button ("Stream now"; #f5f5f7 bg, black text, elevated size at 1069+, 18px after it), genre in bold, a middle dot with 0.25em padding, one-line tagline; text 21px/1.19048 display #f5f5f7 (17px text at 1068 and below); on mobile the text sits above the button (13px gap) non-current captions at opacity 0.36; current 1; 400ms ease scrim under the caption: radial-gradient(100% 33% at left bottom, rgba(0,0,0,0.5), transparent); mobile: linear-gradient(transparent 50%, rgba(0,0,0,0.7)) plus a 200px top scrim rgba(0,0,0,0.4) -> transparent service logo at the top right of the key art Variant A, gallery 2: tiles 417x234 at 1069-1440 (470px wide at 1441+, 188x254 at 735-1068), 13px gap, radius 0 service logo top right (Music 59x21, Arcade 68x21, Fitness 78x21); title 14px/600 white bottom-left (12px mobile); light pill on the right in reduced size (12px) at 1068 and below; dark scrims 70px deep at top and bottom (rgba(29,29,31,0.4)) music artwork inside the tile: radius 8px, 19px from the left Variant B: cards 1245x680 at 1440 (1260x680 max), radius 28px, bg #f5f5f7, gap 20px; first card at the content edge, next card peeks in from the right caption inside: padding 38px 48px; headline top-left 56px/1.07143/600/-0.005em (48px tablet, 32px mobile); subhead 28px/400 under it; CTA pair top-right on the headline row product media fills the lower part, centered; play/pause circle 56px next to the dot pill Variant C: card widths 372px desktop, 344px tablet, 260px mobile; gap 20px; radius 28px heights: lineup about 756px (transparent on #f5f5f7); incentive 523px (white on #f5f5f7); feature 680 / 628 / 480px (short 387 / 356 / 255px); wide feature 696px (643px tablet); essentials 2-up 613x679 at 1440 paddles: two 36px circles below the row at the right, 18px apart, bg rgba(210,210,215,0.64), arrow rgba(0,0,0,0.56), faded at the start or end row scroll padding equals the page gutter so cards snap to the content edge Dot navigation (A and B): container 24px tall, 12px below the gallery (10px mobile); dots 8px circles, 8px margin each side (24px step) up to 7 dots visible; with more slides the dots at both ends shrink and the row shifts by 8-24px as the current slide moves colors: inactive rgba(0,0,0,0.48), hover rgba(0,0,0,0.72), current #000000; on home the pill background is transparent, on product-family the pill is #e8e8ed (solid) or rgba(210,210,215,0.64), 56px tall, radius 999px, padding 0 16px current dot during autoplay: expands from 8px to a 32px track over 250ms ease-in, the track fills with #000000 left to right over the slide duration (linear), then shrinks back to 8px play/pause: circle at the end of the dot row (12px from the end), bg rgba(210,210,215,0.64), icon rgba(0,0,0,0.48), hover rgba(0,0,0,0.72) focus: 2px #0071e3 outline around a focused dot or control MOTION autoplay: 4.16s per slide (data-ac-gallery-item-duration on each slide); pauses on the pause control and while the user interacts; paused when the gallery is off screen (est) slide change: horizontal move, 800ms, easeInOutCubic = cubic-bezier(0.65,0,0.35,1); when a new change interrupts a running one, easeOutQuint = cubic-bezier(0.22,1,0.36,1) caption swap: 600ms (bottom copy duration); non-current captions dim to 0.36 over 400ms ease dots: hover 120ms; stagger between dots 40ms; collapse 380ms; appear and disappear about 480ms with scale 0 -> 1 shelf paddle click: scrolls about one card with smooth scrolling; no autoplay card hover (no-touch only): card grows about 6px in width (scale about 1.016 on a 372px card), 300ms cubic-bezier(0,0,0.5,1) STATES hover: dots and play/pause glyph darken to rgba(0,0,0,0.72); cards grow slightly focus and keyboard: 2px #0071e3 outline; card focus ring drawn 3px inside the card touch and mobile: swipe; paddles hidden on touch; neighbours stay visible reduced motion: no autoplay, instant slide change HOW TO BUILD Gallery 1 and B: horizontal track moved with transform; slide index drives translateX; timeline tween of 800ms with the easings above. Autoplay timer per slide; the current dot animates its width from 8px to 32px and an inner bar scales from 0 to 1 over the slide duration. Variant C: scroll-snap container with smooth scrollBy for paddles and scroll padding equal to the page gutter. PITFALLS home slides are square-cornered with 13px white gaps, not touching and not rounded; product-family cards are rounded with 20px gaps; no arrows over slides; no shadows; the caption button comes first on the home gallery; the progress fill lives inside the current dot, not in a separate bar; the home gallery section is white, not grey. SCREENSHOTS - file: apple_2026_card-gallery_d1440_playing.jpg shows: home gallery 1 at 1440 while playing: current slide centered 930x523, neighbours at both edges with dimmed captions, 13px gaps; gallery 2 tiles below source: live https://www.apple.com/ 2026-09-25 do not copy: key art, service logos - file: apple_2026_card-gallery_d1440_dotnav.jpg shows: gallery 2 and the dot navigation: 7 visible dots, end dots smaller, current dot stretched into a progress track source: live https://www.apple.com/ 2026-09-25 Shelves and hero cards: apple_2026_product-family_d1440_full.jpg on Page: product-family.