---
title: "BRAND Craigslist 2026 · Page: search-results"
url: https://memocore.ai/memos/6abbc79957d33af4d52474ba
project: "Brand Styles"
tags: "brand-craigslist"
updated_at: "2026-09-29T14:44:10.770Z"
---

# BRAND Craigslist 2026 · Page: search-results

HEADER
brand: Craigslist; design_date: 2026-09; page_type: search-results; variants: category-listing (every category URL /search/area/{site}?cat={code}, e.g. sss for sale, apa apartments, same layout with category-specific filters and a "see also" bar), favorites and hidden lists
example_urls: https://sfbay.craigslist.org/search/sss (redirects to https://www.craigslist.org/search/area/sfbay?cat=sss), https://sfbay.craigslist.org/search/apa (redirects to https://www.craigslist.org/search/area/sfbay?cat=apa)
evidence: measured on live pages 2026-09-29: www-2026-09-21 CSS (.cl-search-*, .cl-search-result.cl-search-view-mode-*), search-2026-09-28 JS (breakpoints, gallery metrics) and computed styles at 1440x900 and 390x844 @2x, unless marked; view mode is kept in the URL hash (#search=2~gallery~0) and remembered per visitor
purpose: scan many postings fast and open one
skeleton: app shell with fixed chrome: header 45px, left filter panel 200px (full height, own scroll), query bar 54px and toolbar 52px fixed over the results (results start at y 151 desktop); pageless infinite results (height grows to hundreds of thousands of px); no footer in view; mobile: everything stacks, toolbar scrolls away; sidebar: left
overrides: header is the app header (Overview GLOBAL CHROME, search); no footer

SECTIONS
S1 header / app header fixed - navigate area and category
  background: #eeeeee, 1px #ccc bottom, 45px, padding 0 5px, fixed top z 6000
  elements: peace glyph + "CL" 18px (#551A8B rendered), padding 8px 6px; 4 combo boxes 34px (white, 1px #ccc, radius 4px, label 16px #222, 32px chevron): "SF bay area" (168px), "all SF bay area" (163px), "for sale (all)" or "housing", "all" or "apartments / housing for rent" (190px+); right: thumb buttons (hidden eye glyph when any hidden, pen glyph for post, person glyph for account) 44x44
  responsive: ≤480: peace glyph + two compact dropdown pills ("SF bay area ⌄", "for sale ⌄", 16px #00E on a pale lavender tint, radius 4px) + post + acct
S2 filters / sidebar - narrow the results
  background: #ffffff, fixed left 0, top 45px, bottom 0, width 200px, padding 7.5px, scrolls independently; collapses with the "‹" toggle at top right (slides out: filters margin-left 0 to -180px, results 200px to 20px, query bar left 200 to 20px, keyframes, duration not measured est 200ms)
  elements: title bar: H1 category name 20.8px #00E ("for sale", "apartments / housing for rent" on 2 lines) + chevron-left toggle; category checklist (sss): 5 rows "general for sale / furniture / household items / cars & trucks / electronics", 14.4px #00E link + count 11px #222 right-aligned + native checkbox 13px checked; "+ show 40 more" link-like 14.4px; "check all" (#a9a9a9 disabled) and "uncheck all" links; segmented control "all | owner | dealer" 185x34 (selected all: #bacff2 bg, 2px #00E); checkboxes "search titles only", "has image", "posted today", "hide duplicates" / "show duplicates" 14.4px #222; caps labels "MILES FROM LOCATION", "PRICE", "MAKE AND MODEL" (12px #222 uppercase, est); small inputs "miles", "from zip" with a crosshair glyph, "use map..." link; price "$ min - $ max"; apa adds a price histogram (avg: $2,750, blue bars on a black axis, 10px tick labels $0 $1k $2k $3k $4k ►$117k), BEDROOMS / BATHROOMS / SQ FT min-max inputs and 10 amenity checkboxes (cats ok, dogs ok, furnished, no smoking, wheelchair accessible, air conditioning, EV charging, no application fee, no broker fee); collapsible groups with a ▸ triangle ("condition", "language of posting", "rent period", "housing type", "laundry"); buttons "reset" and "apply" (bd-button 85x34); bottom links 13px: safety tips, prohibited items, product recalls, avoiding scams
  responsive: ≤480: hidden; a "+" button at the start of the filter chip row opens it as a full-screen panel (inf)
S3 query bar - search within the category
  background: #ffffff, fixed top 45px, left 200px, right 0, 54px, padding 5px 8px
  elements: search combo 1128x34 at 1440 (1px #ccc, radius 5px, magnifier glyph, placeholder "search for sale" / "search apartments / housing for rent" 16px); 38x34 search button (magnifier #00E); 38x34 save-search button (bell glyph #00E)
  responsive: ≤480 full width (5px margins) with the two square buttons on the right
S4 toolbar - view mode, sort, quick filters, count
  background: #ffffff, fixed top 99px, 52px, padding 0 8px 8px
  elements: view mode segmented control (Recipe search-view-modes): list, thumb, gallery, map (grid only on mobile) 38x34 each; 44px gap; sort combo "newest" 128x34 (other sorts: price, relevance, upcoming for events); 44px gap; quick filter buttons (bd-button 34px, 16px #222): sss "price", "condition", "sold by"; apa "price", "beds", "baths", "type", "cats ok", "dogs ok", "furnished"; a set filter turns #bacff2; right: count "1 - 20 of 10,000+" 16px #222 (list), "1 - 10 retrieving more" while loading; a day paginator (prev / next day arrows) for dated categories
  responsive: ≤480: rows: filter chips (+, price, condition, sold by) on #f8f8f8, then the view mode bar (5 modes) with the sort combo right, then the count right-aligned; the band is #f8f8f8
S5 see-also bar (hub links, some categories such as apa)
  background: #e6f0fb (border color #d0e3f7), full width of the results area, 30px (est), centered: "SEE ALSO" 13px 700 #444 uppercase, links 14px 600 #1c64ac (studio | 1-BR | 2-BR | furnished | house for rent | pet-friendly) separated by 2px #333 vertical bars 14px high
  responsive: ≤480 bg #f8f8f8, title hidden, horizontal scroll
S6 results / pageless list - the postings
  background: #ffffff; results start ~32px under the toolbar; infinite loading as the viewport nears the end; date separators (1px #ccc top rule, centered, padding 1em 44px) and "nearby" separators (14px 700) between groups
  elements: depends on the view mode (Recipe search-view-modes): list rows 37px pitch; thumb rows ~79px; gallery cards 396x378 in 3 columns at 1440; map full area
  copy: user titles in their own case ("275 gallon caged water tank with", "Workbench Brand new"); meta "brentwood / oakley • 15m ago • $499 • pic • hide"
  media: user photos, object-fit contain inside white card areas
  motion: new results fade in (fadeInOpacity) (est); a result opened in the side preview gets #bacff2
  responsive: ≤480 gallery becomes 1 full-width card, grid mode shows 2 masonry columns, list rows stack location / star + title / meta on three lines
S7 empty state - no results
  elements: "no results found" title, "please try the following:" and link-like buttons "search a wider area", "reset filters", "save this search to be notified when new postings are available", "search within another category:" list

PAGE COMPONENTS
filter panel checklist row: link 14.4px #00E (flex 1) + count 11px right-aligned + native checkbox
price histogram (apa): ~150x70px bar chart, bars mid blue (est #2f6db5), dashed marker at the average, labels 10px
see-also bar: S5
favorite star / hide eye buttons: 24x24 icomoon glyphs, star #888 outline (on: filled #ffd508 bold), eye-slash #bbb; in list mode hide is the word "hide" 14px #888
"pic" link (list mode): 14px orange; hover bold + underline
duplicates button (gallery): tab under the card, 13px, 19px high, 1px #ccc without top, bottom radius 5px

INTERACTIONS
- view mode switching and gallery photo swipe: Recipe search-view-modes
- id: search.filters-collapse
  element: "‹" toggle in the filter panel title bar
  trigger: click
  open: (collapse) filter panel margin-left 0 to -180px, results margin-left 200 to 20px, query bar left 200 to 20px (CSS keyframes slide-out-*); expand reverses (slide-in-*); duration not measured, est 200ms ease
  keyboard: button, Enter/Space
  touch and mobile: panel is not shown inline on mobile
  reduced motion: not handled by the site (est instant is fine)
- id: search.combo
  element: sort, area and category combos
  trigger: click
  open: list box directly under the combo, same width, white, 1px #ccc, bottom corners square on the combo; items 16px padding 5px; hover/focused item #bacff2; instant
  close: select or Escape; instant
- id: search.infinite
  element: results
  trigger: scroll near the end
  open: next results appended; the count text reads "retrieving more" and flashes white to #00E (retrievingTickle); no spinner

STATES
loading: count shows "1 - 10 retrieving more"; gallery images show a loading glyph until the photo arrives
no results: S7
favorites / hidden lists: same page with "no hidden" or a "This is not your current favorites list" note
previewing: the result being previewed in a split pane gets bg #bacff2 (list/thumb) or shadow 0 0 7px 7px #bacff2 (gallery)

SCREENSHOTS
- file: craigslist_2026_search-results_d1440_list.jpg
  shows: /search/sss in list mode at 1440, viewport 1440x2600 (the page is infinite; the first ~60 rows), header, filter panel, query bar, toolbar with list selected
  source: live https://sfbay.craigslist.org/search/sss 2026-09-29
  key values: rows 37px pitch; title 16px #00E; meta 14px #222 with • #888; price 14px 700 #009900; pic orange; hide #888; selected segment #bacff2 + 2px #00E
  do not copy: user titles and photos
- file: craigslist_2026_search-results_d1440_gallery.jpg
  shows: /search/sss gallery mode, viewport 1440x2600: 3 cards per row 396px wide, 18px gaps, price tag corners, dots, meta line
- file: craigslist_2026_search-results_d1440_thumb.jpg
  shows: /search/sss thumb mode at 1440x900: 50px square thumbs, location line, star + title, time • price + hide eye
- file: craigslist_2026_search-results_d1440_apa-gallery.jpg
  shows: /search/apa gallery at 1440x900: apartment filters with price histogram, 7 quick filter buttons, SEE ALSO bar #e6f0fb, cards with housing meta "2br 1025ft2"
- file: craigslist_2026_search-results_d1440_map.jpg
  shows: /search/apa map mode at 1440x900: Leaflet OSM map filling the results area, lavender cluster circles with counts, close x and expand buttons top-left, "showing 8,402, zoom out for more" and "search this region" top-right, + / - zoom bottom-right
- file: craigslist_2026_search-results_m390_top.jpg
  shows: mobile /search/sss at 390x844 @2x, gallery mode: compact header pills, search + two square buttons, filter chips, 5-mode bar (grid visible) with sort, count, one full-width gallery card
- file: craigslist_2026_search-results_m390_grid.jpg
  shows: mobile grid mode, viewport 390x2400: 2 masonry columns of cards (photo at natural ratio, price tag, 2-line title, meta with star and eye)
- file: craigslist_2026_search-results_m390_list.jpg
  shows: mobile list mode, viewport 390x1700: 3-line rows (location 16px #222, star left, title 16px #00E wrapping, meta "12m ago • $50 • pic • hide"), ~68px per row