BRAND Airbnb 2026 · Page: search-results

HEADER brand: Airbnb; design_date: 2026-09; page_type: search-results; variants: category-listing (the Homes / Experiences / Services tabs and shelf "see all" links open the same layout) example_urls: https://www.airbnb.com/s/Osaka/homes?locale=en&currency=USD evidence: measured on live https://www.airbnb.com/s/Osaka/homes?locale=en&currency=USD 2026-09-25 at 1440x900 unless marked; mobile layout (inf/est), not captured purpose: compare listings on a list and a map and open one skeleton: header 150px (compact search row + filter chip row); split view: list 630px (x 48-678) + map 650px (x 727-1377), gap 49px; 18 cards per page in 2 columns; total ~4860px at 1440; sidebar: map right overrides: header shows the compact pill with the query ("Homes in Osaka | Any week | Add guests", search circle 32px) plus a second row of filter chips; the header band keeps the white-to-#F8F8F8 fade and ends with a 1px #EBEBEB rule at y 150 SECTIONS S1 header / sticky with filters - refine the search row 1 (96px): as Overview, compact pill 420x46 (content-sized) row 2 (filters): centered chip row at y 100: "Filters" chip with a 16px sliders icon (83x33px), then a 1px #DDDDDD vertical divider (est 24px tall), then amenity chips "Washer", "Wifi", "Self check-in", "Air conditioning", "Hair dryer", "Kitchen", "Heating"; each 33px tall, radius 24px, border 0.67px #DDDDDD, padding 8px 12px, 12px 400 #222222, 8px apart motion: selected chip border #222222 and bg #F7F7F7 (est), 200ms S2 list heading - result count layout: y 182, "Over 1,000 homes in Osaka" 20px/26px 600 left; right: 3D pink tag + "Prices include all fees" 14px 400 S3 product-grid / 2 columns - results layout: cards 303px wide, 24px column gap, rows every 417px (est from y 240 -> 657) card: image 303x227 (4:3) radius 20px with the photo carousel (5 dots, hover arrows, Recipe listing-shelf), "Guest favorite" frosted badge (14px 500 here, with a gold trophy icon for the top 1% "Guest favorite" variant), heart text (12px below): row 1 "Apartment in Chuo" 15px/19px 500 #222222 + right "★ 4.91 (272)" 15px 400; row 2 the host title 15px #6C6C6C, 1 line with ellipsis; row 3 "1 bedroom · 2 small double beds · 1 bath" 15px #6C6C6C; row 4 dates "Feb 24 – Mar 1" 15px #6C6C6C; row 5 price: "$211" struck #6C6C6C, "$194" 15px 500 #222222 underlined, "for 5 nights" 15px #6C6C6C; row 6 tags "Book early to save" 11px 500 #038026 and "Free cancellation" 11px 500 #6C6C6C on light grey rounded rects (radius 4px, est) S4 pagination - more results layout: centered under the list at ~y 4168: previous chevron, page numbers as 32px circles 14px 500 (current: bg #222222 text #FFFFFF; others #222222 text, hover bg #F7F7F7), next chevron; "…" for gaps copy under it 14px #6C6C6C "1 – 18 of 1,000+ places to stay" (est) S5 map / sticky - where the results are layout: 650x684px (viewport height minus header and 24px), top 192px, position sticky top 192px, radius 20px, overflow hidden elements: light custom Google map; price pins: white pills ~28px tall (est), radius 28px, shadow 0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.18) (est), text "$358" 14px 600 #222222; top-left: none; top-center: location pill "Osaka" with pin icon, 40px, white, radius 20px, shadow-e1 (est); top-right: expand button 40px white circle; zoom group 40px buttons (+ / -) stacked, white, radius 8px, divider 1px #DDDDDD (est); Google logo and attribution bottom motion: hovering a card enlarges and darkens its pin (bg #222222, text white, scale 1.08, 200ms, est); clicking a pin opens a 327px mini card above it (image 4:3 radius 12px, close ×, text 15px, est) S6 footer - as Overview (full width under the split view) PAGE COMPONENTS filter chip, Filters button: as S1 (Filters opens a 780px modal radius 32px with sections Recommended, Type of place segmented, Price range histogram slider, Rooms and beds counters, Amenities chips; footer "Clear all" underlined + "Show 1,000+ places" dark button 48px radius 8px) (not measured, est) search card: Recipe listing-shelf (search results card) map price pin: S5 INTERACTIONS - card photo carousel: arrows on hover, dots window (Recipe listing-shelf) - list and map sync: moving the map re-runs the search ("Search as I move the map" behaviour, est), list updates with a skeleton - hover card -> highlight pin (est) - the chip row scrolls horizontally with a white fade and a 28px arrow at the ends when it overflows (est) STATES loading: 303x227 grey #F2F2F2 boxes and bars (est); map pins fade in no results: centered message "No exact matches" 22px 500 + "Try changing or removing some of your filters or adjusting your search area." 16px #6C6C6C, "Remove all filters" button (not measured, est) mobile (<744): full-screen map on top with a draggable bottom sheet holding the list (handle bar 40x4px #DDDDDD radius 2px), "Map" floating dark pill toggles; cards full width 342px with 20px radius (inf) SCREENSHOTS - file: airbnb_2026_search-results_d1440_top.jpg shows: first screen at 1440x900: header with query pill and filter chips, count heading, 2 columns of cards with dots, sticky map with price pins source: live https://www.airbnb.com/s/Osaka/homes?locale=en&currency=USD 2026-09-25 key values: chips 33px radius 24; heading 20px 600; card image 303x227 radius 20; map 650x684 radius 20 top 192 do not copy: listing photos, map tiles - file: airbnb_2026_search-results_d1440_scroll.jpg shows: two viewport shots stacked (scroll 900 and 3700, header hidden): the list continuing beside the sticky map, and the pagination and footer at the bottom; not a full-page capture (the sticky map would repeat in every part)