BRAND Craigslist 2026 · Page: product-detail

HEADER brand: Craigslist; design_date: 2026-09; page_type: product-detail (a classified posting); variants: every posting type (for sale, housing, jobs, services, community, events) uses this template; housing and jobs add more attribute groups; the same posting also opens inside the search app as a preview pane (cl-posting-viewer) example_urls: https://www.craigslist.org/view/d/{slug}/{id} (captured: a for-sale-by-owner musical instruments posting in the east bay with 5 photos) evidence: measured on the live posting 2026-09-29 (posting-2026-09-21-13-38 CSS parsed rule by rule, server HTML, computed styles at 1440x900 and 390x844 @2x) unless marked; this page is still the classic server-rendered template, not the JS app purpose: show one posting with its photos and let the visitor reply, save, hide or flag it skeleton: classic header 42px, section.body centered max-width 980px (61.25em) with padding 8px 9px (x 230-1210 at 1440), one flow of blocks, footer; total height 983px at 1440 with 5 photos and a short text, 1364px at 390; sidebar: right column (map + attributes) at ≥1024 only overrides: header is the classic posting header (white "CL" pill + breadcrumbs, post | account) instead of the app header; posting title and body use the serif stack; visited links show browser purple SECTIONS S1 header / classic breadcrumb bar - where the posting lives background: #eeeeee, 1px #cccccc bottom, 42px, padding 5px 0, line-height 30.8px elements: "CL" pill 30x26 (white, 1px #ccc, radius 1em, padding 4px, 16px #00E) at x 5; breadcrumbs 15px #00E: "SF bay area › east bay › for sale by owner › musical instruments" ("›" #222, 5px gaps); right: "post" | "account" 14.4px #00E with a 1px #999 divider between them, 2% right margin responsive: ≤480 narrow header 37px: CL pill + one line "east bay › musical instruments - by owner" 15px with ellipsis and a bold "..." at the right that expands the full header S2 action bar (dateReplyBar) - act on the posting background: white; height ~40px; font-size smaller elements: reply button 62x32: bg #ece3ef, 1px #b481c9, radius 0.2em (3.2px), 16px/19.2px #7b1fa2 "reply", padding 0 12.8px, margin-right 32px; then 4 icon actions 69px wide each, icon above a 14px #333 label: star "favorite", eye-slash "hide", flag outline "flag", share arrow "share" (icon glyphs ~16px grey #bbb/#999); "Posted 16 days ago" 13.3px #222 with the relative time underlined by a 1px dotted #000 border (margin 0 40px); "print" 13.3px #00E at the right motion: reply bg to #dcd1d3 on hover (150ms ease-in-out); actions width transition 125ms linear when an action hides another (favorited postings hide "hide"); the "Posted" line fades in (opacity 0 to 1) responsive: ≤480 labels and date hidden: reply button + 4 bare icons (24px, #bbb) spread across the width S3 title - what and how much background: white; margin 10px 0 elements: H1 22.4px (1.4em) 700 "Bitstream Vera Serif", "Times New Roman", serif #222 on one line: "{user title} - $1,000 (pittsburg / antioch)" (price and area in the same serif bold) copy: user title, often mixed case, 8-12 words responsive: wraps to 3 lines on mobile at the same size S4 photos and side column (userbody, flex column wrap) layout desktop (≥1024): left: image carousel 602x450 box (images max 600x450, contained, top-left aligned, no border, no radius; grey area none - white background); under it a row of 5 thumbnails 50x50 (48px image + 1px border), selected thumb 1px orange border + 1px orange ring; right: column 300px wide at x 901 (16px left margin): map 318x300 (bleeds 9px, Leaflet OSM tiles, a purple 1px outlined circle with a light purple fill marking the approximate area, 3 stacked zoom/full-screen buttons top-left in a grey rounded group, "© craigslist - Map data © OpenStreetMap" 12px), then attribute group: rows with 8px top padding, label 16px 700 #222 ("condition:", "make / manufacturer:", "model name / number:"), value 16px #222 or #00E link ("good") elements (carousel): arrows "‹" "›" as half-round white tabs on the left and right edges and a centered "image 1 of 5" strip (white, .8em #333, opacity .75) that appear only on hover (non-touch) and fade; arrows always visible on touch media: user photos 600x450 max (JPEG from images.craigslist.org), letterboxed on white; placeholder: neutral product photo 4:3 responsive: ≤610: the map and attributes move below the text (order: photos, text, attributes, map, post info); ≤480 the carousel is full-bleed 390 wide (margin 0 -9px), thumbnails 40x40 (42 with border), map full-bleed 220px high S5 posting body - the user's description elements: #postingbody 16px "Bitstream Vera Serif", "Times New Roman", serif #222, normal line-height, paragraphs 16px apart, user HTML allowed (lists indented 40px, bold, links break anywhere); ~1-40 lines copy: user text, plain sentences or lists S6 post info - ids and dates elements: 4 inline items 12px #222 with 12px margins: "post id: 7965815352", "posted: 16 days ago", "updated: 21 minutes ago" (times underlined dotted), a grey heart + "best of" link underlined with a tiny "[?]" superscript S7 notice box - safety background: white, 1px #eee border, padding 8px, 13px: "Avoid scams, deal locally" as #00E links then plain "Beware wiring (e.g. Western Union), cashier checks, money orders, shipping." S8 footer - as Overview (classic): #eee, 1px #ccc top, links help safety privacy terms about app centered 13px, "© 2026 craigslist" on a second row PAGE COMPONENTS reply button: bg #ece3ef, border 1px #b481c9, radius 0.2em, color #7b1fa2, 1.2em text in 2em height, padding 0 .8em; hover bg #dcd1d3, 150ms ease-in-out; focus: browser outline (state sheet); clicking opens an inline reply panel under the bar (contact options, a captcha step) - not captured action icon with label: 69px wide, centered icon over a 14px #333 label; clicked flag gets bg #ddd radius 3px thumbnail strip: floated 50x50 thumbs, no gaps, selected orange border + ring attribute row: bold label + value, 8px top padding; "available now" in housing is green dotted time: relative time with a 1px dotted bottom border, full date in the title tooltip INTERACTIONS - id: posting.carousel element: photo carousel S4 trigger: click on arrows or thumbnails, swipe on touch open: the swipe-wrap slides one image (JS swipe, transform; duration not measured, est 300ms ease); the thumbnail border moves instantly; "image n of 5" strip updates and fades out (fadeOut 2s) keyboard: not exposed (thumbnails are links) touch and mobile: swipe; arrows visible reduced motion: not handled; use instant change - id: posting.map-fullscreen element: map full-screen button trigger: click open: map becomes position fixed full-screen (z 1004) with a close bar (#666 bg, white, opacity .75); instant close: close bar or Escape STATES favorited: star filled #ffd508, "hide" action collapses (width 0, 125ms) hidden (banished): title grey (lightgray) with line-through, "unhide" red trash flagged: "flagged" link #7b1fa2 expired or deleted: "This posting has expired" or "deleted by its author" page with similar postings (cl-posting-unavailable-see-also, thumbs max 100px) (inf, not captured) print: header, thumbnails and actions hidden, attributes float right SCREENSHOTS - file: craigslist_2026_posting_d1440_full.jpg shows: full posting page at 1440 (1440x983), default state source: live https://www.craigslist.org/view/d/... (east bay, musical instruments) 2026-09-29 key values: section max-width 980px; reply #ece3ef / #b481c9 / #7b1fa2; title 22.4px serif 700; image 600x450 area; thumbs 50px with orange selected border; map 318x300; attribute labels 16px 700; body 16px serif do not copy: the user's photos and text; use placeholders - file: craigslist_2026_posting_m390_full.jpg shows: full posting at 390 @2x (1364px): narrow header, reply + 4 icons, 3-line serif title, full-bleed photo with arrows, thumbs, text, attributes, map, post info, footer