BRAND Airbnb 2026 · Page: product-detail

HEADER brand: Airbnb; design_date: 2026-09; page_type: product-detail; variants: experience and service detail pages (same column and booking card pattern, different sections; not measured) example_urls: https://www.airbnb.com/rooms/12855489?locale=en&currency=USD evidence: measured on live https://www.airbnb.com/rooms/12855489?locale=en&currency=USD 2026-09-25 at 1440x900 unless marked; mobile values (inf/est), mobile not captured purpose: convince the guest and get them to pick dates and press Check availability / Reserve skeleton: centered 1120px column (x 152-1272 at 1440); content column 653px + booking column 372px (sticky); 12 sections; total ~6700px at 1440; sidebar: right (booking card) overrides: header is the compact variant (96px, compact search pill, Recipe search-bar) and not sticky; an 80px sticky section nav takes over after the gallery; header bottom 1px #EBEBEB SECTIONS S1 header - compact (see Overview) S2 article-header / title row - name the place padding: 24px top; layout: H1 left (max ~962px), actions right aligned to the title's last line elements: translate icon 24px (when auto-translated) + H1 26px/30px 500 #222222 (2 lines); "Share" (upload icon) and "Save" (heart) text buttons 14px 500 underlined, 16px icons, 24px apart S3 pdp-gallery / grid - show the place layout: 1120x476px, top 204px; left photo 560x476, then a 2x2 grid of 272x238 / 272x230 photos, 8px gaps; outer corners radius 12px (whole grid clipped) elements: "Show all photos" button bottom-right inside the grid (24px inset): 140x32px, bg #F2F2F2 (on the photo it reads white-ish, est #FFFFFF with 1px #222222 border in older builds), radius 8px, 12px 500 + 16px dots-grid icon motion: hover on a photo darkens it with an overlay rgba(0,0,0,0.15) (est), 200ms; click opens the full-screen photo tour responsive: <744 full-bleed swipeable carousel 4:3 with "1 / 24" counter pill bottom-right (inf) S4 content column starts (653px, x 152) and booking card column (372px at x 899, top 712, sticky top 80px) S5 summary - what it is elements: H2 22px/26px 500 "Entire rental unit in Chuo, Japan"; line 16px/20px 400 #222222 "4 guests · 1 bedroom · 2 beds · 1 bath" S6 guest favorite box - social proof layout: 653x88px, border 0.67px #DDDDDD, radius 12px, padding 22px 26px, 32px below S5 elements: gold 3D laurels around "Guest favorite" (18px 600, 2 lines), text 16px 500 "One of the most loved homes on Airbnb, according to guests", then "4.91" 18px 600 + 5 small stars 10px, vertical 1px #DDDDDD divider, "272" 18px 600 + "Reviews" 12px 500 underlined S7 host row + highlights - trust host row: 40px avatar with pink Superhost badge, "Hosted by えびす" 16px 500, "Superhost · 11 years hosting" 14px 400 #6C6C6C; 1px #DDDDDD rules above and below (padding 24px) highlights: 3 rows, 24px outline icon (trophy is a 3D render), title 16px 500 ("Top 10% of homes", "Self check-in", "Extra spacious"), text 14px 400 #6C6C6C; 32px between rows (est); 1px rule below S8 rich-text description - details translation note: bg #F7F7F7 (est #F2F2F2), radius 12px, padding 12px 16px, 16px text + underlined "Show original" 500 description: 16px/22px 400 #222222, clamped to ~8 lines; "Show more" grey button 132x48px (button-secondary); 1px rule below; section padding 48px S9 "Where you'll sleep" - bedrooms H2 22px; card: photo 318x211 radius 12px (est), "Bedroom" 16px 500, "2 small double beds" 14px #6C6C6C S10 feature-grid "What this place offers" - amenities H2 22px; 2 columns x 5 rows, 24px outline icons + 16px 400 labels ("Kitchen", "Wifi", "TV", "Elevator", "Washer", "Air conditioning"...), 16px row gap (est); "Show all 45 amenities" button-secondary 208x48px S11 reviews / rating hero - trust centered block (full 1120 width): gold 3D laurels + "4.91" 100px/100px 500 tracking -2px; "Guest favorite" 20px 600; 16px #6C6C6C text "This home is in the top 10% of eligible listings based on ratings, reviews, and reliability" (top 10% bold); "How reviews work" 14px underlined category bar: 7 columns separated by 1px #DDDDDD vertical rules: "Overall rating" with 5 mini bars (4px tall, #222222 fill on #DDDDDD), then Cleanliness 4.9, Accuracy, Check-in, Communication, Location, Value: label 14px 500, score 18px 600 (est), 32px outline icon at the bottom topic chips row "Guest reviews mention": pills 44px tall (est), radius 22px, border 1px #DDDDDD, 16px icon + "Getting around 126"; scroll arrows at the right review grid: 2 columns (566px each, 64px gap), avatars 48px circle, name 16px 500, tenure 14px #6C6C6C, stars + "3 weeks ago · Stayed about a week" 14px, body 16px/24px clamped to 3 lines, "Show more" 16px 500 underlined; 6 reviews; "Show all 272 reviews" button-secondary S12 map "Where you'll be" - location H2 22px; map 1120x480 radius 20px, 24px below; a black home pin 48px circle with a white house icon; zoom and fullscreen controls white 40px (est); under it "Chuo, Osaka, Japan" 16px 500 and host-written text 16px, "Show more" underlined S13 host "Meet your host" - trust layout: host card 395x211 (radius 24px, shadow 0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.10), padding 24px 16px): avatar 104px (est) with badge, name 26px/30px 700, "Superhost" 14px; stats column right ("1905 Reviews", "4.89★ Rating", "11 Years hosting": 22px 700 (est) + 10px 600 labels, 1px rules between); right column: "えびす is a Superhost" 18px/24px 500 + 16px text; "Host details" 18px 500 + "Response rate: 100%"; "Message host" button-secondary 48px radius 8px (est); legal note 12px with a 3D shield icon S14 things to know - policies H2 16px/20px 400 visually 22px (the section title "Things to know"); 3 columns: 24px icon, title 16px 500 ("Cancellation policy", "House rules", "Safety & property"), 3 lines 16px #6C6C6C, "Learn more" underlined S15 breadcrumbs + links - SEO background #F7F7F7 band from here to the footer; breadcrumb "Airbnb › Japan › Osaka Prefecture › Osaka" 14px; H2 22px "Explore other options in and around Chuo Ward, Osaka-city"; 3-column link grid (city 16px 500 + "Vacation rentals" 14px #6C6C6C); "Other types of stays on Airbnb" 18px 500 + 3-column link list 14px S16 footer - as Overview PAGE COMPONENTS booking card: 372px wide, bg #FFFFFF, border 0.67px #DDDDDD, radius 12px, shadow 0 6px 16px rgba(0,0,0,0.12), padding 24px; title "Add dates for prices" 22px/26px 500 (with dates: "$194" 22px 600 + "for 5 nights" 16px, est); input group 323px: row 1 two 56px cells "CHECK-IN" / "CHECKOUT" (10px 700 #222222 + 14px value "Add date" #6C6C6C), row 2 GUESTS 60px with chevron; outer border 1px #B0B0B0 (est), radius 8px; button-primary "Check availability" 48px pill gradient 16px below; after dates: "Reserve", "You won't be charged yet" 14px centered, price breakdown rows 16px with underlined labels and a 1px rule before "Total" 16px 600 (inf) report link under the card: flag icon + "Report this listing" 14px 500 #6C6C6C underlined, centered, 32px below sticky section nav: 80px white bar with 1px #EBEBEB bottom border, fixed at top after the gallery scrolls away; links Photos, Amenities, Reviews, Location 14px 400 #222222 at x 152, 24px apart, active link 4px #222222 bottom bar (est); right side shows price + small Reserve pill once the booking card is out of view (inf) INTERACTIONS - booking card is position sticky, top 80px (stays in view until the reviews section) - date cells open a 2-month calendar dropdown anchored to the card (same calendar as Recipe search-bar, right-aligned, width ~660px, radius 16px, est) - "Show more" / "Show all ..." open 32px-radius modals with a scrim rgba(26,26,26,0.40) sliding up 24px with the enter curve (est) - Share and Save: Save toggles the heart fill #FF385C; Share opens a modal - photo grid click opens the photo tour page (vertical stacks by room) STATES dates chosen: button label "Reserve", price in the card title, fees included unavailable dates: struck-through calendar days #C1C1C1 (est) loading: grey #F2F2F2 gallery boxes (est) SCREENSHOTS - file: airbnb_2026_product-detail_d1440_top.jpg shows: first screen at 1440x900: compact header, title with translate icon, Share/Save, 5-photo gallery, summary, Guest favorite box, booking card source: live https://www.airbnb.com/rooms/12855489?locale=en&currency=USD 2026-09-25 key values: column 1120 at x 152; H1 26px 500; gallery 1120x476 radius 12; booking card 372 radius 12 shadow 0 6px 16px 12% do not copy: host photos and text, laurel and 3D renders - file: airbnb_2026_product-detail_d1440_full.jpg shows: full page at 1440 stitched from 8 viewport shots with the header hidden after the first; the sticky booking card appears again in several parts (it follows the scroll), and the section nav is hidden key values: 100px rating hero, 7-column category bar, 2-column reviews, 20px radius map, host card radius 24, #F7F7F7 link band and footer