BRAND Mailchimp 2026 · Recipe: p23-carousels

HEADER brand: Mailchimp; design_date: 2026-10; kind: component; used_in: BRAND Mailchimp 2026 · Page: home S5 (stat band) and S6 (case studies) evidence: read from p23-less.0d3ec901.1.css (.p23Carousel*, .verticalStatCarousel*, .homepageCaseStudyCarousel*), the carousel chunk 7986.cfe81bc6f70f263c.1.js and the module chunks 4598.7e908d7d51f8f153.1.js (autoAdvanceMs 5e3) and 3413.f11c951378cfb494.1.js (autoAdvanceMs 4e3), checked with computed styles and frame captures on https://mailchimp.com/?currency=USD at 1440 and 390, 2026-10-06 unless marked LOOK Variant A, stat band: a full-width near-black #231e15 band with a faint, blurred warm-grey glow shape behind. On the left a yellow eyebrow, a big white serif sentence with one figure set on a yellow marker box ("$1.1 billion"), a small white footnote and a white arrow link. On the right edge a vertical stack of four slim pills; the active one is longer and yellow. Every 5 seconds the sentence slides up and out while the next slides up from below, both fading. Variant B, case studies: one large white card in the middle (photo on the left two thirds with a dark gradient and a white serif quote, stats column on the right), with the previous and next cards peeking at both sides, smaller (89%), faded to 60% and dimmed. Every 4 seconds the cards shift sideways one position. Three grey capsule pills below; then a centered pair of buttons. STRUCTURE shared component (p23Carousel): screen-reader live region; viewport (grid, all panels stacked in one cell, grid-area 1/1); each panel gets one of the roles active, prev, next, far-left, far-right by ((index - current) mod n); pill navigation; optional pause button (hidden in both home variants) stat band (desktop >= 992px): host bg #231e15, padding 117px max(5rem, 50% - 40rem) (117px 80px at 1440); viewport height 274px (17.125rem), overflow-y clip; pills absolutely positioned at right 24px, vertically centered, column, gap 10px stat slide: eyebrow, H2 headline with an em highlight, footnote, CTA row (ctaArrow on dark) case carousel: section header (H2 + "View all case studies" arrow link) indented 4% at >= 992px; carousel host; footer row with Request demo (ctaSecondary) + Start Free Trial (dark ctaPrimary), 16px apart, centered, 48px below the pills case card: flex row, radius 24px; photo pane (flex 4, 5 at >= 1600) with an image cover and a bottom overlay; stats pane (flex 1) with two stat pairs separated by a 1px #bcbab6 divider, byline at the bottom, "Read the case study" arrow link KEY PARAMETERS stat band: glow = inline SVG blob (viewBox 1588 x 992, gaussian blur) as ::before, opacity .18 desktop / .14 mobile stat eyebrow 16px/24px Graphik 500 #ffe01b; headline Means 40px/45.2px 400 #ffffff, max 900px; em highlight: bg #ffe01b, text #231e15, radius 3px, padding .06em .18em, line-height 1.22, box-decoration-break clone, font-style normal; footnote 13px/20px Graphik 400 #ffffff; CTA ctaArrow 16px with white text stat pills: inactive 8 x 36px #bcbab6 radius 4px; active 8 x 52px #ffe01b; hit area extended 6px vertical, 10px horizontal; focus outline #ffe01b stat slides (4): "Peak Season" / "Mailchimp customers generated [$1.1 billion] in gross revenue in just 62 days."; "Automation" / "... saw up to [8x more] orders ..."; "SMS Marketing" / "... [97% higher click rate] ..."; "Ecommerce Marketing" / "... up to [27x ROI]" stat mobile (< 992px): horizontal strip of outlined cards: border 2px #403b3b, radius 20px, min-height 444px, padding 24px, next card peeks 12px; headline 28px/31.5px; body and CTA 13px; module padding 24px 20px 8px; pills horizontal under the cards: dots 8px #403b3b at .4, active a 40 x 8px capsule (yellow #ffe01b in this dark variant) case card at 1440: active card 1088 x 650 (max-width 85% of the 1280 container at 1200-1599px; 82% at 992-1199; 100% at >= 1600); min-height 650px (750 at 992-1199, 554 at >= 1600); shadow 0 8px 64px rgba(35,30,21,.06), 0 4px 8px rgba(35,30,21,.04) photo pane: 805px wide, radius 24px 0 0 24px, bg #231e15; overlay linear-gradient(rgba(35,30,21,0) 0%, rgba(35,30,21,.55) 45%, rgba(35,30,21,.82) 100%), padding 24px, white text: eyebrow 16px/500, quote Means 32px/40px max 61% wide stats pane: 283px, bg rgba(255,255,255,.93), border 1px #bcbab6, radius 0 24px 24px 0, padding 40px; stat value Means 48px/48px (max(1.75rem, min(5.5vw, 3rem))); stat label 16px/28px; byline 20px/28px rgba(35,30,21,.65) with the name in 500 #231e15; CTA ctaArrow 16px (no hover stretch in this pane, scaled .9 at 1200-1422px, .75 at 992-1199) neighbours (>= 992px): opacity .6, transform translate(calc(+-84.833% +- clamp(4rem, 6vw, 7.5rem))) scale(.89) (translate +-97.833% at >= 1600) case pills: 40 x 8px #403b3b, radius 100px, inactive opacity .4, active 1; width/opacity 300ms mobile case card: stacked: photo 376px tall with the quote overlaid, white stats pane below with the two stats side by side split by a vertical rule (stat 36px), byline 12px; neighbours peek at the right edge; buttons stack full width (dark Start Free Trial first, borderless Request demo below) MOTION panel change: transform and opacity 400ms cubic-bezier(.4,0,.2,1); filter 150ms stat (vertical): incoming panel from translateY(calc(100% + 12px)) opacity 0 -> translateY(0) opacity 1; outgoing to translateY(calc(-100% - 12px)) opacity 0; others hidden (visibility hidden) case (horizontal): active -> prev slides left and shrinks to scale .89 at opacity .6; next becomes active (scale 1, opacity 1); far panels opacity 0 at +-200% hover on the case carousel (>= 992px): active panel filter brightness(1.04) and scale(1.015), neighbours brightness(.88), 150ms filter / 400ms transform; the stat band has hover scale disabled (--noHoverScale) auto-advance: stat 5000ms, case 4000ms; timer pauses while hovered, focused, dragged or off-screen (inf from the timer conditions) and resumes with the remaining time; clicking a pill jumps there (420ms input lock) entrance: viewport starts opacity 0, translateY(2.4em); when 10% of the carousel enters the viewport (IntersectionObserver threshold .1) it gets --entered: opacity 1, translateY 0, 500ms ease-out (both properties) mobile: horizontal drag/swipe on the case carousel is disabled (disableDrag), pills and auto-advance only; the mobile stat strip scrolls with snap reduced motion: no panel transitions (instant swap), no entrance motion, pills instant STATES pill hover: none beyond the pointer; pill focus-visible: 2px outline (#ffe01b on dark); keyboard: pills are buttons in tab order; touch: tap pills; loading: viewport invisible until entered HOW TO BUILD Stack all slides in one grid cell and assign role classes (active, prev, next, far) from the index difference; transition transform and opacity 400ms with the standard material curve. Vertical variant moves on Y and hides neighbours; horizontal variant keeps neighbours visible at scale .89, opacity .6 and offset by about 85% plus a gap. A JS timer advances every 5s (stat) or 4s (cases) and pauses on hover or focus. Fade the whole viewport up 2.4em on first view. PITFALLS sliding a horizontal track (it is stacked panels with per-role transforms); neighbours at full opacity; round dots on the dark stat band (they are slim vertical bars on desktop); yellow highlight with italic text (the em is upright on a yellow box); a soft drop shadow on the stat band (flat dark band plus a very faint blurred glow); too-fast swaps (400ms) SCREENSHOTS - file: mailchimp_2026_stat-carousel_d1440_frames.jpg shows: stat band at 1440, two states: slide 1 "Peak Season" (yellow top pill) and slide 2 "Automation" after the swap source: live https://mailchimp.com/?currency=USD 2026-10-06 - file: mailchimp_2026_stat-carousel_m390_card.jpg shows: mobile stat card at 390 @2x: outlined 20px-radius card on #231e15, Means 28px headline with two yellow marker boxes, next card peeking, yellow capsule pill - file: mailchimp_2026_case-carousel_d1440_frames.jpg shows: case-study carousel at 1440, card 1 active then card 2 active; neighbours scaled and dimmed at the edges; "Feedback" tab and "Chat with Sales" bubble are third-party widgets, not part of the design do not copy: customer photos and quotes; use placeholders