BRAND Airbnb 2026 · Recipe: listing-shelf

HEADER brand: Airbnb; design_date: 2026-09; kind: component; used_in: BRAND Airbnb 2026 · Page: home S3-S16, Page: search-results S3 (card photo carousel) evidence: measured on live https://www.airbnb.com/?locale=en&currency=USD and /s/Osaka/homes 2026-09-25 (1440x900, 390x844) from computed styles and element stylesheet rules unless marked LOOK Each home section is one row. A 20px semibold title with a small round grey arrow button sits on the left, and two tiny round grey paging buttons sit on the right. Under it runs a strip of square-ish photo cards with 20px rounded corners. On desktop a whole number of cards fills the content width exactly (7 at 1440), and the next card is hidden behind the right content edge. Each photo carries a frosted white "Guest favorite" pill top-left and a white-outlined heart top-right. Under the photo are one medium line (type and place) and one small grey line (price, nights, star rating). Paging slides the strip by a whole page. On search results the cards are larger and hold their own photo carousel with small dots and hover arrows. STRUCTURE row header (height 24px + 8px gap to optional subtitle) - title: link wrapping h2 span, 20px/24px 600 #222222, tracking -0.18px ("Popular homes in Osaka") - arrow chip right after the title, 8px gap: 28x28px circle bg #F2F2F2, 12px bold arrow icon #222222 (stroke ~3px at 32px viewBox, not a thin text arrow) - optional subtitle: 14px/18px 400 #6C6C6C ("Plus, get Airbnb credit when you stay at a featured hotel.") - paging buttons at the right content edge: Previous and Next, 28x28px circles bg #F2F2F2, 12px bold chevrons, 4px apart (x 1317 and 1349 at 1440); disabled: opacity 0.5, icon #C1C1C1 strip - starts at the 48px page margin; card width = (content width - (n - 1) x 12px) / n with n = 7 at 1440 (content 1329px -> 179.5px, pitch 191.5px); the container clips at the content edge (overflow hidden on the row wrapper, not the viewport), so the 8th card (x 1389) is not visible at all - card image: 179.5 x 170.5px (ratio ~1.05:1, est 20:19), radius 20px, overflow clip, object-fit cover - text block: 8px below the image; line 1 title 13px/16px 500 #222222 ("Apartment in Chuo", may wrap to 2 lines); line 2 at +18px: 12px/16px 400 #6C6C6C "$76 for 2 nights · ★ 4.91" with the middle dot 12px 700 #C1C1C1 and a 10px star glyph #222222 - badge top-left, 12px inset: height 25px, padding 5.5px 9.5px, radius 14px, bg rgba(255,255,255,0.8), shadow 0 0 0 1px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.10); text 11px/13px 600 #222222 ("Guest favorite", "Trending", "Popular") - heart top-right: 32px hit area, 8px inset; 24px icon, fill rgba(0,0,0,0.5), stroke #FFFFFF 2px; saved: fill #FF385C (inf) - row end: a "See all" tile (13px 600 #222222) after the last card, with a collage of 3 small thumbnails (est) row spacing: title-to-title about 300-330px; strip image top 44px below the title top; next title 48px below the last text line (est from positions) variants on the same shelf - experiences: same card; line 2 "From $136 / guest · ★ 4.89"; optional line 3 "Minimum $69 to book" - category tiles ("Explore experiences nearby"): photo tiles 124px wide, pitch 134px (10px gap), radius 8px, label under the image 13px/18.6px 500 #222222, 8px gap - services tiles ("Find services near you"): 139x139px bg #F7F7F7 radius 20px, a 91px 3D object render centered, label under 13px 500 search results card (Page: search-results) - 303 x 227px image (4:3), radius 20px; photo carousel with 5 dots bottom center, 6px dots 5px apart, active #FFFFFF, others rgba(255,255,255,0.6), 18px from the bottom - arrows on card hover: 32px circles at the vertical center, 12px inset, bg rgba(255,255,255,0.9), shadow 0 2px 4px rgba(0,0,0,0.18), 12px chevron #222222 - text 15px: title 15px 500 #222222 with rating "★ 4.91 (272)" right aligned 15px 400; description lines 15px 400 #6C6C6C; price row "$211" struck #6C6C6C + "$194" 15px 500 #222222 underlined + "for 5 nights"; tags "Book early to save" 11px 500 #038026 and "Free cancellation" 11px 500 #6C6C6C, each on #F7F7F7 (est) radius 4px padding 2px 4px (est) KEY PARAMETERS cards per row: 7 at 1440 (179.5px); 6 at 1128-1439 (est); 4-5 at 744-1127 (est, 40px margins); mobile 2.3 visible (165 x 157px, gap 12px, first card at 24px, the third card peeks because mobile rows scroll natively and are not clipped) paging distance: one full page (7 cards at 1440) image radius 20px everywhere on cards; tiles 8px (experience categories) and 20px (services) MOTION - paging: strip translateX by one page, smooth scroll ~500ms with --motion-springs-standard (stiffness 175, damping 26; 584ms) (inf); the Previous button enables after the first move - paging buttons: hover scale 1.07143 (28 -> 30px) with the icon counter-scaled 0.9333 so it stays 12px; background #F2F2F2 -> #EBEBEB; press scale 0.928571; transform 250ms cubic-bezier(0.2,0,0,1) - heart: press scale 0.92, focus-visible scale 1.08 + ring 0 0 0 2px #FFFFFF, 0 0 0 4px #222222; on save it fills #FF385C with a quick pop (scale 1 -> 1.2 -> 1, spring fast bounce 449ms) (inf) - card hover on home: nothing changes (no lift, no zoom); cursor pointer - search card hover: arrows fade in (opacity 0 -> 1, 200ms, est); photo change slides the photo track by 100% (300ms cubic-bezier(0.2,0,0,1), est); dots slide so the active one stays in the 5-dot window - mobile: native horizontal scroll with snap to card starts, no buttons STATES card focus-visible (desktop >=744): link ring 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px #222222, padding-bottom 4px added, radius follows the card disabled paging: opacity 0.5; loading: grey #F2F2F2 image boxes (radius 20px) and 2 grey text bars (est) touch: swipe; long-press has no special state reduced motion: paging jumps without the slide (inf) HOW TO BUILD A section header (title link + arrow chip left, two 28px icon buttons right) above a row wrapper with overflow hidden at the content box (48px page margins). Inside it a flex track with gap 12px whose cards are calc((100% - 72px) / 7) wide at >=1440. The track moves by translateX (or scroll-snap scrolling) one page per click. Each card is a link: an aspect-ratio 20/19 image wrapper with radius 20px and overflow clip, an absolutely positioned frosted badge and heart button, then two text lines. PITFALLS Don't let an 8th card peek at the right on desktop. The row ends flush with the content edge, and only mobile shows a peeking card. Card titles are 13px medium and meta lines are 12px grey, which is smaller than most rebuilds use. Keep the arrow chips small (28px), grey-filled, with bold icons, not outlined white circles or thin text arrows. Badges are frosted white with a soft shadow, not solid. The heart is a translucent dark fill with a white outline, never a solid white heart. Don't add card shadows or hover zoom. SCREENSHOTS - see BRAND Airbnb 2026 · Page: home files airbnb_2026_home_d1440_full.jpg (shelves), airbnb_2026_home_m390_full.jpg (mobile shelves) and BRAND Airbnb 2026 · Page: search-results file airbnb_2026_search-results_d1440_top.jpg (search cards with dots)