Component Gap Audit

Dark 4-column footer with logo, links, and bottom bar. Used on every single page — brand and product. CSS is defined in shared.css (inlined per page) but there is no documented spec, anatomy, or live example in the DS preview.

Full messaging interface with a thread sidebar, message bubbles (incoming .bubble.in / outgoing .bubble.out), and a text input footer. This is a React app mounted at #chat-app-root — but the DS needs to document the visual tokens and component shapes that React uses.

3-column / 2-row asymmetric grid of property photos. First image spans both rows. "View all" button overlaid bottom-right. Badge row top-left. Core to the Listing detail page — one of the highest-traffic product surfaces.

Circular user identity element with initials fallback. Used in three separate contexts with three different class names — indicating inconsistency. Sizes vary: 36px (chat threads), 52px (landlord card), 60px+ (press profile). No single token-based definition exists.

4-column grid of key property facts (size, rooms, rent, floor). Each cell has a label (.k), value (.v), and optional sub-text (.sub). Heavily used on the listing detail page — critical for tenant decision-making.

3-column grid of property features with icon + label. Off/unavailable items use .amenity.off (opacity 0.4). Icon uses brand red stroke. Used on listing detail and listing creation.

Profile card for the landlord on the listing detail page. Contains avatar, name, verification badges, response time, and a contact button. Overlaps with the Avatar gap — the avatar here is ad-hoc inline CSS, not using a component.

Neighbourhood section on Listing: a placeholder map with a hood label + walk score strip, plus a 4-column grid of nearby points of interest (transit, grocery, etc). The map itself is a placeholder in mock-up but will be a real Google Maps embed in production.

2-column grid of trust/safety features with icon, title, and description. Uses --sam-brown-light background tiles. Appears in the Listing "Trygghet" section and SafetyPackage page. Visually similar to Amenities but with larger copy blocks.

Horizontally scrollable anchor-link bar that sticks below the main nav on the Listing detail page. Links jump to page sections. Visually similar to .account-nav and .tabs already in the DS, but semantically different (anchor links, not state tabs).

Inline pill-shaped tags listing property features (pets, balcony, furnished, etc). The .ok modifier turns items green to indicate "allowed" status. Similar to but distinct from .chip in the DS — these are read-only, not interactive filter chips.

Top hero section on brand pages: eyebrow label, H1, subtitle, CTA button(s), optional stats row. Two class names are used (.page-hero and .brand-hero) across pages — suggesting drift. The template file uses .brand-hero.

Full-width section at the bottom of brand pages: dark or warm background, centred heading, body copy, and one or two CTA buttons. Template file defines it as a standard closing section for all brand pages.

Horizontal row of 3–4 metric highlights (e.g. "50 000+ trygga uthyrningar"). Large number + small descriptor label. Used inside hero sections and as standalone trust sections. Numbers use tabular-nums.

Expandable question/answer list using native <details> + <summary> elements. Grouped by category with H2 headings. Used on FAQ page and as an inline section on brand landing pages. No custom JS — pure CSS animated expand.

Vertical list of year-labelled milestones used on the About page company history section. Year in a styled pill, connected by a vertical rule. Currently used only once but is a reusable brand pattern.

Icon + title + description block used in groups of 3 on the Contact page (phone, email, chat channels). The .ch-icon has per-type colour modifiers (.phone, .email, .chat). Visually similar to the feature-grid gap above.