BRAND Apple 2026 · Page: product-family

HEADER brand: Apple; design_date: 2026-09; page_type: product-family (hub of one product line); variants: /mac/, /ipad/, /watch/ (inf) example_urls: https://www.apple.com/iphone/ (live 2026-09-24 and 2026-09-25); evidence: measured (HTML, stylesheet rules, Chrome DevTools at 1440x900 and 390x844) unless marked purpose: let the user pick a model in the line, compare, learn what makes it special and buy skeleton: content column 87.5% of viewport up to 1260px (1245px at 1440, left edge 89px); 10 sections; content ends at 6589px at 1440 and 5569px at 390, then a footer with very long footnotes (8658px at 1440); sidebar: none overrides: header light theme SECTIONS S1 header / flyout as Overview, light theme S2 announcement-bar - financing offer background: #f5f5f7; height: 46px desktop, 86px mobile (wraps) elements: 1 line --type-caption #1d1d1f with footnote mark, then "Learn more ›" #0066cc; centered S3 page heading background: #ffffff; padding-top: 60px (40px at 1068 and below); mobile padding-bottom 8px elements: page headline --type-page-headline (80px/600), 1 word ("iPhone"), left-aligned at the content edge height with chapter nav: 367px at 1440 S4 chapter nav / product icon row - jump to each model layout: one row of 10 items; each item link 77px wide with padding 0 20px 15px (0 11px 15px on mobile), 10px apart (0 on mobile); the row scrolls horizontally when it overflows, with 50x130px edge paddles (34x114 on mobile, 29px arrow icon) and a 10px fade elements: product cutout 66px tall (36-77px wide); label --type-chapternav-label (14px/600) #1d1d1f 10px below (4px on mobile); "New" 12px/600 #b64400 6px below the label; last items: Compare, Accessories, Shop, software version icon motion: on scroll the row collapses into a sticky local nav bar (min height 52px) with the product name and a small blue "Buy" pill (cta padding 6px 10px); collapse is scroll-linked (height follows scroll progress) S5 hero cards / Recipe card-gallery variant B - featured models layout: cards 1245x680 at 1440 (up to 1260x680), radius 28px, bg #f5f5f7, gap 20px; first card aligned to the content edge, next card peeks in from the right elements: per card: headline top-left 56px/600 (48px tablet, 32px mobile); subhead 28px/400; CTA pair top-right on the headline row (primary pill "Learn more" + "View pricing ›" or "Buy"); product media fills the lower part; dot pill + 56px play/pause under the gallery section height: 950px at 1440, 722px at 390 S6 lineup / "Explore the lineup." background: #f5f5f7; section padding 112px top, no bottom padding (mobile 56px bottom) section header: headline left, "Compare all models ›" right shelf: product tiles 372px wide (344px tablet, 260px mobile), about 756px tall, transparent on #f5f5f7, 20px gap, first tile at the content edge, row runs past the right edge; paddles 36px below right tile elements top to bottom: product image (24px below; 20px tablet); color swatch dots (26px below); "New" label; product name 28px/600; positioning line 17px (16px below; 12px mobile); price lines (16px below; 12px mobile); CTA pair 40px below ("Learn more" pill + "Buy ›" or "View pricing ›") section height: 1006px at 1440 S7 incentives / "Why Apple is the best place to shop iPhone." background: #f5f5f7; section header link "Shop iPhone ›" shelf: white cards 372x523, radius 28px, 20px gap; each: eyebrow 17px/600, headline 28px/600 (2-3 lines), small artwork; plus button bottom right opens a modal section height: 925px at 1440 variant: section-incentive-alt swaps copy for some visitors S8 feature cards / "Get to know iPhone." background: #ffffff shelf: feature cards 372x680 (344x628 tablet, 260x480 mobile); short variant 387 / 356 / 255px tall; wide variant 696px (643px tablet); mostly theme-dark (black) cards with white text; each: eyebrow 17px/600, headline 28px/600 over 2-3 lines, full-bleed image; plus button bottom right (on dark cards #f5f5f7 with black plus) opens a modal (Overview COMPONENTS modal) section height: 930px at 1440 variant: section-consider-alt ("Switch to iPhone.") replaces it for some visitors S9 essentials / "iPhone essentials." layout: 2 banner cards 613x679 at 1440, 20px gap, radius 28px, #f5f5f7; each: headline 28px/600 centered at the top, one line of text, chevron link, product artwork below section header link "All iPhone accessories ›" S10 image accordion / "Significant others." box: 784px tall at 1069+; accordion column 350px wide on the left with side padding clamp(67px, 7.15%, 90px); image on the right accordion: 3 items ("iPhone and Mac", "iPhone and Apple Watch", "iPhone and AirPods"); titles 28px/600 display (24px tablet, 21px mobile); open item shows a 17px paragraph (14px mobile) 21px below the title (18px tablet) and a link 14px below; rows separated by 1px #d2d2d7, first row without a line motion: opening an item swaps the image with a 400ms ease-in-out crossfade; tray height 400ms ease-in-out mobile: stacked, side padding clamp(20px, 7.15%, 30px) section height: 1116px at 1440, 1346px at 390 S11 link index background: #fafafc; section padding 112px (96 / 56) layout: first group up to 50% wide with 88px end padding, items --type-flyout-link size (28px/600 display; 24 / 21px); other groups up to 25% wide with 44px end padding, items 17px/600 (14px mobile); group titles 17px/400 #6e6e73, 15px below (first group 14px); tablet: first group full row, others 50%, 42px apart; mobile: stacked, 26px apart motion: titles and links fade in from 4px above when the block top reaches 70% of the viewport height section height: 337px at 1440 S12 footer as Overview; footnotes are very long on this page PAGE COMPONENTS local sticky nav (collapsed chapter nav): min height 52px; product name and a small blue "Buy" pill (padding 6px 10px); other values not measured product tile swatches: small color dots per finish (size not measured, est 12px) INTERACTIONS hero cards and shelves: Recipe card-gallery plus buttons: open modals (Overview COMPONENTS modal), 400ms crossfade image accordion: see S10 nav flyout: Recipe globalnav-flyout STATES loading: images lazy load empty, error: n/a SCREENSHOTS - file: apple_2026_product-family_d1440_full.jpg shows: /iphone/ at 1440x900 from the top to the end of the link index (footer cut off) key values: ribbon 46px; headline 80px; chapter nav 10 items; hero card 1245x680; lineup tiles 372x756; incentive cards 372x523; feature cards 372x680; essentials 613x679; accordion 784px do not copy: product images, logos - file: apple_2026_product-family_m390_full.jpg shows: /iphone/ at 390x844 @2x, footer hidden for the capture key values: cards 260px wide; section padding 56px Also on the Overview: apple_2026_x-product-family_d1920_default_top_light.png (top of the page), apple_2026_overview_d1440_footer.jpg (end of the footer).