# Each result card shows name, category, image, and distinguishing data point

- **Pattern:** `ab-001066` (`directory-search-discovery.results-sorting.card-content`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001066
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001066)

## Why it matters

Result cards are the scanning surface where users decide which listing to click into. A card showing only a name and image forces users to open every result to compare them, destroying the point of a listing grid. A card with name, category, image, and at least one distinguishing signal (rating, distance, price, hours) lets users triage 20+ listings in seconds. This is a content-integrity and user-experience failure simultaneously: thin cards bury the directory's data value and tank click-through to detail pages.

## Severity rationale

High because thin cards force open-every-result scanning, which collapses engagement depth and inflates bounce from detail pages.

## Remediation

Design `ListingCard` to always render four fields: image, name, category, and a distinguishing data point appropriate for the directory type (rating for restaurants, price for rentals, distance for services). Edit `components/ListingCard.tsx`:

```tsx
<Image src={listing.imageUrl} alt={listing.name} width={300} height={200} />
<h3>{listing.name}</h3>
<p>{listing.category}</p>
<span>⭐ {listing.rating} · {listing.distance} km</span>
```

Fall back to a placeholder image when `imageUrl` is null.

## Detection

- **ID:** `card-content`
- **Severity:** `high`
- **What to look for:** Enumerate all relevant files and Examine a result card in the listings grid. Verify that it displays: (1) listing name (required, prominent), (2) category or type (required), (3) image (required, visual), (4) a distinguishing data point such as rating, distance, price, or hours (required). Check multiple result cards to ensure consistency.
- **Pass criteria:** At least 1 implementation must be present. Every result card displays name, category, image, and at least one distinguishing data point (rating, distance, price, hours, address, etc.). Information is clear and readable.
- **Fail criteria:** Any of the four elements is missing from result cards (no image, no category, no distinguishing point), or the distinguishing point is not relevant/useful.
- **Skip (N/A) when:** Results/listing grid is not implemented. Signal: no listing cards found.
- **Detail on fail:** `"Result cards show only name and image. Missing category, rating, and other distinguishing info."` or `"Category shown but no image. Cards lack visual interest and are hard to scan."`
- **Remediation:** Design comprehensive result cards:

  ```tsx
  // components/ListingCard.tsx
  import Image from 'next/image'

  export function ListingCard({ listing }) {
    return (
      <div className="border rounded-lg overflow-hidden">
        <Image
          src={listing.imageUrl}
          alt={listing.name}
          width={300}
          height={200}
          className="w-full h-48 object-cover"
        />
        <div className="p-4">
          <h3 className="font-bold text-lg">{listing.name}</h3>
          <p className="text-sm text-gray-600">{listing.category}</p>
          <div className="flex justify-between items-center mt-2">
            <span className="text-sm">⭐ {listing.rating}</span>
            <span className="text-sm">{listing.distance} km away</span>
          </div>
        </div>
      </div>
    )
  }
  ```

  Adjust fields based on your directory type (restaurant, real estate, services, etc.). The key is providing enough context for users to make a quick decision.

---

Taxons: content-integrity, user-experience

HTML version: https://auditbuffet.com/patterns/ab-001066