BRAND Craigslist 2026 · Recipe: search-view-modes

HEADER brand: Craigslist; design_date: 2026-09; kind: component; used_in: BRAND Craigslist 2026 · Page: search-results S4 and S6 evidence: measured on live https://www.craigslist.org/search/area/sfbay?cat=sss and ?cat=apa 2026-09-29 (www-2026-09-21 CSS .cl-segmented-selector, .cl-search-result.cl-search-view-mode-*, .cl-gallery; search-2026-09-28 JS CSS_METRICS and gallery sizing; computed styles 1440 and 390) unless marked LOOK A row of square icon buttons joined into one segmented control switches the result list between five views: list (one text line per posting), thumb (small square photo + three text lines), gallery (large white cards with a photo swiper, three per row on desktop), grid (mobile only: two masonry columns of smaller cards) and map (Leaflet map with lavender cluster circles). The switch is instant: no animation, the results re-render in place and the choice is kept in the URL hash (#search=2~<mode>~<page>). The selected button is pale blue with a thick blue border, the only strongly highlighted control on the page. STRUCTURE toolbar left group: segmented control .cl-view-mode-selector with buttons in order list, thumb, grid (hidden on desktop by cl-no-grid-mode), gallery, map; then a separate "map view" button used when panes are available (hidden at 1440 without room) results container .cl-search-results-pageless with class cl-search-view-mode-<mode>, each result .cl-search-result.cl-search-view-mode-<mode> list row: favorite star | title | meta (location • time • price • pic • hide) thumb row: 50px thumb | [location line; star + title; time • price, eye-slash hide] gallery card: photo swiper (main image, back/forward arrows on hover, dots) | title | meta line (star, time • location, eye) | price tag in the top-left corner grid card: same as gallery at stack width, arranged in stack columns (masonry) map: Leaflet map filling the results area with cluster markers; buttons close (x) and full-screen (expand) top-left, "showing N, zoom out for more" and "search this region" top-right, zoom + / - bottom-right, scale and "© OpenStreetMap" bottom-right KEY PARAMETERS segmented buttons: 38x34 each at desktop (bd-button padding 8px, 1px #ccc, 16px glyph #00E on white), margin 0, radius 0 except first (5px left corners) and last (5px right corners); selected: color #00E, bg #bacff2, border 2px #00E, padding 7px; hover (unselected): bg #bacff2, border #999; mobile: 5 buttons 38x34 at 1x (76x68 @2x), same styling glyphs (icomoon): list = 4 stacked lines, thumb = bullets + lines, grid = 3x3 squares, gallery = framed picture, map = folded map list mode: row = result-node flex, height 21px + margin-bottom 16px (37px pitch); star 24x24 (padding-right 8px, margin-top -3px) #888 outline; title 16px #00E, one line, ellipsis, padding-right 3px; meta 14px #222 white-space pre: location, " • " (#888, padding 0 3px), time "15m ago", price 14px 700 #009900, "pic" 14px orange (hover bold underline), "hide" 14px #888; duplicates are indented 12px with a 3px #888 left border thumb mode: row flex; thumb ~50x50 square crop at left, 10px gap (est); line 1 location 16px #222; line 2 star (margin 0 4px 0 0) + title 16px #00E line-height 20px; line 3 "14m ago • $50" 14px (price 700 #009900) + eye-slash glyph #bbb; row pitch ~79px at 1440 (est from screenshot) gallery card: base width 300px + 16px spacing (CSS_METRICS .gallery), JS scales the width between 0.5x and 1.5x so a whole number of cards fills the row (desktop target 3): at 1240px results width -> 396px cards with 18px gaps (x 208 / 622 / 1036); height 378px at 1440 (photo area 394x318 incl. dots, title 24px, meta 32px); border 1px #ccc, radius 5px, box-shadow 0 0 7px 0 #ddd, bg white, margin-bottom 28px; photo contained (letterboxed on white), top-right radius 5px; dots row 21px under the photo, centered, each "•" 18px in an 18px slot, current #009900, others #cccccc; price tag: absolute at top -1px left -1px, white, 1px #ccc on top and left only, radius 5px top-left and bottom-right, padding 3px, 16px #009900 (apa shows e.g. "$3,981"); title 16px #00E, one line with ellipsis, margin 0 3px, padding 3px; meta line flex space-between: star 24x24 (margin 5px), meta 14px/20px #666 "<1hr ago • Concord" (location shrinks with ellipsis; housing adds "2br 1025ft2" with superscript 2), eye-slash 24x24 #bbb at the right gallery arrows: 19.2px glyph boxes, width 1.3em, white bg, #666, opacity 0.6, 1px #ddd border, half-round on the inner side (radius 2.5em), shown only on hover of the photo grid mode (mobile): stack width 200px + 8px spacing base (CSS_METRICS .grid), 2 columns at 390 (~180px each at 1x, 8px gap); cards like gallery with the photo at its natural aspect, price tag 14px, 2-line title, meta with truncated location; dots hidden on narrow screens map mode: markers are circles (radius 100px), bg hsla(249,100%,85%,0.6), border 1px hsla(249,100%,80%,0.6), count 12px #222 centered, sizes grow with count (~24px for 1-9 up to ~46px for 1000+, est); visited or hover hsla(300,69%,83%,0.6); favorites gold #ffd700 with #daa520 border; control buttons white 38x38 1px #ccc radius 4px (est) with #00E glyphs; info buttons white 16px #222 padding 8px 1px #ccc radius 5px paned layouts: when the window has room the map or a posting preview can open in a right pane (bd-split-pane with a drag bar); at 1440 in this capture there was no room (panes-NAK) MOTION trigger: click on a mode button at 0ms: selected styles move to the clicked button, results container class changes and results re-render; no transition, no fade gallery swipe: drag or arrow click moves the swipe-wrap by one card width (394px at 1440) with a CSS transform; transition-duration set by the swipe script (0ms at rest, ~300ms per slide est); dot color switches instantly infinite load: rows appended; the count flashes "retrieving more" map: Leaflet zoom animation transform 0.25s cubic-bezier(0,0,0.25,1); popups fade 0.2s linear STATES hover: unselected mode button bg #bacff2, border #999; gallery photo shows arrows; list "pic" bold underline; title #0000B3 underline focus and keyboard: each mode button is a real button (Tab, Enter/Space); focus outline 5px auto -webkit-focus-ring-color touch: gallery photos swipe horizontally; arrows hidden on touch mobile: grid mode added between thumb and gallery; gallery = 1 full-width card per row (~372px); list rows wrap to 3 lines reduced motion: nothing to change (switch already instant); keep swipe instant loading fallback: loading glyph in the photo area; "no image" placeholder (grey peace sign + "no image") for postings without photos HOW TO BUILD A segmented control of five icon buttons sets a mode class on the results container; each mode is a different CSS layout over the same result data: list = single-line flex rows, thumb = flex rows with a 50px square image, gallery = flex-wrap of fixed-width cards (compute card width = base 300px scaled so 3 fit per row on desktop, 1 on phones), grid = two masonry columns (CSS columns or two flex stacks), map = Leaflet with clustered markers. Store the mode in the URL hash. No animation between modes. PITFALLS using rounded, shadowed "modern" cards everywhere (only gallery/grid cards have the 5px radius and the soft #ddd glow); forgetting the price tag that sits in the card's top-left corner with only two borders; cropping photos to fill (gallery photos are contained, with white bands); coloring the selected segment with a solid dark fill (it is pale #bacff2 with a 2px #00E border); adding transitions between views; using grey instead of #00E for titles. SCREENSHOTS - file: craigslist_2026_search-results_d1440_viewmodes.jpg shows: key frames stacked: list, thumb, gallery and map modes of the same toolbar and results area at 1440 (crops 1240x420 of the results area, x 200-1440, from the page screenshots) source: live https://sfbay.craigslist.org/search/sss and /search/apa 2026-09-29 key values: selected segment #bacff2 + 2px #00E; list rows 37px; thumb 50px squares; gallery cards 396px, radius 5, shadow 0 0 7px #ddd; map clusters lavender do not copy: user photos and titles - see also Page: search-results files (full frames of every mode, mobile grid)