BRAND Mailchimp 2026 · Recipe: spotlight-cards

HEADER brand: Mailchimp; design_date: 2026-10; kind: component; used_in: BRAND Mailchimp 2026 · Page: home S3 (Recommended for your business) evidence: read from spotlight_card_grid-less.b566743b.1.css, p23_horizontal_grid-less.8d7f7dff.1.css and the React chunk 1530.7b03eef902c3e0c4.1.js (personalizedGridV2), card data from the page JSON (personalizedGridV2-*), checked with computed styles and frame captures on https://mailchimp.com/?currency=USD at 1440 and 390, 2026-10-06 unless marked LOOK On a light grey #f5f5f5 band, white rounded cards sit in rows of two. At rest the two cards in a row are equal; each shows a small line icon, a headline, one sentence, three check bullets that fade out toward the bottom, an arrow link at the bottom, and a product image on the right. When the pointer rests on one card, that card widens to two thirds of the row and fills with Mailchimp yellow, its bullets become fully visible and its image grows to a full-height panel flush with the right edge; the other card in the row narrows to one third, its text dims to 55% and its image disappears. The text of both cards blinks out for a moment while the layout reflows, so the change reads as a single smooth swap. STRUCTURE section header: H2 "Recommended for your business" (Means 40px) left aligned, 80px above the first row (desktop) grid: column of rows, 16px apart; 10 cards in the data (shown: 4 = 2 rows on the default variant, ids sms, sales, automation, email...; personalized order) row (.spotlightRow): position relative; behind it a shadow track with two rounded slots that mirror the card widths and carry the shadows; above it the inner flex row with the two cards (overflow hidden, aspect-ratio 2.65532) card (.spotlightCard): flex row: content column (flex 60%) + image column (flex 0 0 40%); a full-card transparent click target behind the content content: icon 32px (margin-bottom -8px), headline, description, bullet list (16px check icon in a circle, #231e15 mask), CTA arrow link pinned to the bottom (margin-top auto) KEY PARAMETERS row at 1440: 1280 x 482 (aspect 2.65532), gap 16px; card radius 24px; card bg #ffffff at rest, var(--accent-color) #ffe01b expanded (all 10 cards use #ffe01b) rest widths: 632 + 632; expanded: 843 + 421 (flex-grow 2 vs 1) shadow slot rest: 0 4px 16px rgba(0,0,0,.06); expanded slot: 0 10px 50px rgba(0,0,0,.10) content padding 48px 14px 48px 48px, gap 12px; inner card aspect 1.32766 (content does not reflow while width changes) headline 23px/30px Graphik 400 #231e15 (est family from screenshot); description 14px/21px #231e15; bullets 16px with 8px vertical margin, padding-left 24px; body text column masked by linear-gradient(#231e15 35%, transparent 100%) so the bullets fade out at rest CTA: ctaArrow 15px/500; inside an expanded card the arrow circle turns #231e15 with a yellow arrow (mask) and the label grows to 17px; arrow hover does NOT stretch here (static circle) image at rest: padding 48px 48px 48px 0, img max 212 x 266px, radius 16px, object-fit cover top image expanded: flex-basis 45%, padding 0, img fills full height, radius 0 16px 16px 0 minimized card: content opacity .55, image opacity 0, CTA visually hidden 1000-1300px: paddings 24px, headline 17px/24px, body 12px/18px, CTA 12-13px; 992-1100px: headline 16px/22px, body 11px/16px MOTION trigger: mouseover a card with a 150ms hover-intent timer (setTimeout 150ms before the expanded key changes); leaving the card to outside the row collapses both (no delay); focus inside a card expands it immediately open: card flex-grow 1 -> 2, 300ms ease-in-out; sibling 1 -> 1 (relative width 50% -> 33%); shadow slot flex-grow and box-shadow 300/320ms; card background #ffffff -> #ffe01b 320ms; image flex-basis 40% -> 45%, padding 48px -> 0, opacity, 300ms ease-in-out; image max-width and border-radius 300ms/320ms; CTA font-size 15 -> 17px 300ms ease-in-out; minimized content opacity 1 -> .55 300ms ease-in-out reflow dip: both changed cards get .spotlightCard--reflowing for 300ms: description and bullets run @keyframes spotlightReflowDip 300ms both: 0% opacity 1, 16% 0, 55% 0, 100% 1 switching from one card to the other in the same row: the previous expands key is replaced after the 150ms intent; both cards dip at once close: reverse with the same durations mobile (<=992px): rows become one horizontal scroll-snap carousel (x mandatory, cards flex 0 0 calc(92.5vw - 2em), height 632px, 16px gap, 7.5vw side padding, no scrollbar); every card is yellow with the image as a 232px full-width band at the bottom; indicator dots under it: 8px circles rgba(35,30,21,.3), active a 32 x 8px #231e15 capsule, width/radius/color 320ms reduced motion: no expansion; desktop shows a static 2-column grid of all cards with shadow 0 4px 16px rgba(0,0,0,.06), bullets unmasked; card hover only underlines the CTA STATES hover/focus: expanded as above; keyboard: tabbing into a card's CTA expands that card; touch: carousel, all cards expanded style; loading: the section reserves aspect-ratio 1.30544 (desktop) or min-height 632px (mobile) before React renders HOW TO BUILD Two-card flex rows with overflow hidden; on pointer rest (150ms intent) set flex-grow 2 on the hovered card and toggle classes for accent background, dimmed sibling and image layout; animate flex-grow, background-color and image sizes over 300ms ease-in-out and run a 300ms opacity dip on the text so the reflowing text is never seen mid-wrap. Keep the shadows on a separate track behind the row so the overflow clip does not cut them. PITFALLS animating width in px instead of flex-grow; no text dip (text visibly rewraps); forgetting the bottom fade mask on the resting bullets; yellow on both cards; scaling the card; making the sibling disappear (it stays, dimmed to .55); shadow clipped by the row overflow SCREENSHOTS - file: mailchimp_2026_spotlight-cards_d1440_frames.jpg shows: four frames of row 1 at 1440 (cropped): 1 rest (two equal white cards, bullets fading), 2 mid-transition about 150ms after hover on "Design with ease" (card yellow and widening, text dipped to 0), 3 left card expanded (yellow, full-height image, sibling dimmed), 4 right card expanded source: live https://mailchimp.com/?currency=USD 2026-10-06 do not copy: product imagery; use placeholder UI mockups